主页 / 问题 / 1206414
Accepted
realHikkan
Asked:2021-11-18 21:14:04 +0000 UTC2021-11-18 21:14:04 +0000 UTC

如何将图标放置在块的中心

  • 772

我无法设置社交图标。块中心的网络footer。它们必须垂直和水平地站在中心。

我尝试使用margin-left: auto;andmargin-right: auto;将它们水平居中，但它不起作用。我也尝试过text-align: center;and 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>

html

1 个回答

  1. Best Answer

    如果您开始使用 flex，那么您不需要添加任何边距或垂直对齐。

    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>

    • 1

相关问题