Как разместить иконки по центру блока

Question

У меня не получается выставить иконки соц. сетей по центру блока footer. Нужно что бы они встали по центру по вертикали и по горизонтали.

Я пробовал через margin-left: auto; и margin-right: auto;, что бы выставить их по центру по горизонтали, но не получается. Так же пробовал через text-align: center; и vertical-align: center;, но так же ничего не получалось.

.container {
  width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  width: 100%;
  height: 83px;
  background-color: #f4f7f6;
  margin-bottom: 64px;
}

.social {
  display: flex;
}

.icon {
  width: 25px;
  height: 21px;
  margin-right: 24px;
}

<footer>
  <div class="container">
    <div class="footer">
      <!-- Соц. сети -->
      <div class="social">
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/004-twitter.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/001-pinterest.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/003-tumblr.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/005-instagram.svg" alt=""></a>
        </div>
      </div>
    </div>
  </div>
</footer>

Answer 1

Если вы начали использовать flex то не нужно никаких margin'ов или vertical-align'ы добавлять.

align-items отвечает за выравнивание по вертикали

justify-content отвечает за выравнивание по горизонтали.

.container {
  width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  width: 100%;
  height: 83px;
  background-color: #f4f7f6;
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social {
  display: flex;
}

.icon {
  width: 25px;
  height: 21px;
  margin-right: 24px;
}

<footer>
  <div class="container">
    <div class="footer">
      <!-- Соц. сети -->
      <div class="social">
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/004-twitter.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/001-pinterest.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/003-tumblr.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/005-instagram.svg" alt=""></a>
        </div>
      </div>
    </div>
  </div>
</footer>

БЛОГ НА HUSL

Как разместить иконки по центру блока

Ответы (1 шт):