Question

我在HTML文档中创建了一个<footer>，我想使用flexbox将所有项目居中放在容器子元素中，但是我缺少了一些东西。

我基本上在父元素上使用display: flex，并尝试使用justify-content将子元素内的所有项目居中。

<footer>
    <div class="container">
        <div class="inner-footer">
            <div class="social-media-links">
                <h1>SOCIAL MEDIA</h1>
                <div class="social-icons">
                        <i class="fab fa-youtube"></i>
                        <i class="fab fa-facebook-square"></i>
                        <i class="fab fa-instagram"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-linkedin"></i>
                </div>
            </div>
            <div class="sponsors">
                <img src="https://i.imgur.com/5nJy41x.png" alt="">
                <img src="https://i.imgur.com/F1uzinG.png" alt="">
            </div>
            <p class="copyright">&copy; 2019 CVABA 3A CMET <br />
            Website design & development by XYZ</p>
        </div>
    </div>
</footer>


.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}

我希望页脚内的所有项目都居中。

Answer 1

使用.flex-column设置垂直方向。在flexbox容器上使用align-items实用程序可更改弹性项目在横轴上的对齐方式（y轴开始，flex-direction: column则为x轴）。从start，end，center，baseline或stretch中选择（浏览器默认）。

因此将其添加到css文件中：

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
  }
  .d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
  }
  .flex-column {
    -ms-flex-direction: column!important;
    flex-direction: column!important;
  }

并使用此：

<footer>
    <div class="container bg-info">
      <div class="d-flex flex-column align-items-center">
        <div class="social-media-links">
          <h1>SOCIAL MEDIA</h1>
          <div class="social-icons">
            <i class="fab fa-youtube"></i>
            <i class="fab fa-facebook-square"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-linkedin"></i>
          </div>
        </div>
        <br>
        <div class="sponsors">
          <img src="https://i.imgur.com/5nJy41x.png" alt="">
          <img src="https://i.imgur.com/F1uzinG.png" alt="">
        </div>
        <p class="copyright">&copy; 2019 CVABA 3A CMET <br />
        Website design & development by XYZ</p>
      </div>
    </div>
  </footer>

如何使用FlexBox在容器内居中放置项目

1 个答案: