弹性 justify-content 居中

Question

我正在创建一个移动优先网站，我正在尝试使用 flex 来居中我的 headers。我希望容器的 children 居中。我也尝试过在不使用 flex 的情况下将 children 的边距设置为自动，但这似乎也没有使它居中。我哪里错了？

代码

.footer__social {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer__social--h1 {
  width: 25%;
}

<div class="footer__social">    
  <img class="footer__social--h1" alt="Heading"     src="Images/footer__social--h1.png"/>
  <img class="footer__social--h2" alt="Sub heading" src="Images/footer__social--h2.png"/>
  <div class="footer__social--Icons"> <!-- ICONS -->
    <img class="footer__social--Icons-twitter" alt="Twitter" src="Images/footer__social--icons-twitter.png"/>
    <img class="footer__social--Icons-facebook" alt="Facebook" src="Images/footer__social--icons-facebook.png"/>
    <img class="footer__social--Icons-Instagram" alt="Instagram" src="Images/footer__social--icons-instagram.png"/>
  </div>
</div>

截图

Answer 1

我不建议使用图像作为标题文本...更喜欢屏幕阅读器可以阅读并由 Google 索引的实际文本。

不过，我想你想要这样的东西：

.footer__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid grey;
  width: 50%;
  /* or whatever */
  text-align: center;
}
.icons {
  margin-top: auto;
  background: pink;
}

<div class="footer__social">
  <img src="http://lorempixel.com/image_output/nightlife-q-c-150-40-1.jpg" alt="">
  <img src="http://lorempixel.com/image_output/technics-q-c-150-30-3.jpg" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur, fugit quaerat? Ullam, molestias, illum.</p>
  <div class="icons">
    <!-- ICONS -->
    <img class="footer__social--Icons-twitter" alt="Twitter" src="http://lorempixel.com/image_output/abstract-q-c-40-40-6.jpg" />
    <img class="footer__social--Icons-facebook" alt="Facebook" src="http://lorempixel.com/image_output/abstract-q-c-40-40-6.jpg" />
    <img class="footer__social--Icons-Instagram" alt="Instagram" src="http://lorempixel.com/image_output/abstract-q-c-40-40-6.jpg" />
  </div>
</div>

Answer 2

如果你使用列，那么你需要align-items:center;

.footer__social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}
.footer__social--h1 {
  width: 25%;
}

<div class="footer__social">    
  <img class="footer__social--h1" alt="Heading"     src="Images/footer__social--h1.png"/>
  <img class="footer__social--h2" alt="Sub heading" src="Images/footer__social--h2.png"/>
  <div class="footer__social--Icons"> <!-- ICONS -->
    <img class="footer__social--Icons-twitter" alt="Twitter" src="Images/footer__social--icons-twitter.png"/>
    <img class="footer__social--Icons-facebook" alt="Facebook" src="Images/footer__social--icons-facebook.png"/>
    <img class="footer__social--Icons-Instagram" alt="Instagram" src="Images/footer__social--icons-instagram.png"/>
  </div>
</div>

else，childs 上的 margin auto，此处演示的 h1

.footer__social {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer__social--h1 {
  width: 25%;
  margin:auto;
}

<div class="footer__social">    
  <img class="footer__social--h1" alt="Heading"     src="Images/footer__social--h1.png"/>
  <img class="footer__social--h2" alt="Sub heading" src="Images/footer__social--h2.png"/>
  <div class="footer__social--Icons"> <!-- ICONS -->
    <img class="footer__social--Icons-twitter" alt="Twitter" src="Images/footer__social--icons-twitter.png"/>
    <img class="footer__social--Icons-facebook" alt="Facebook" src="Images/footer__social--icons-facebook.png"/>
    <img class="footer__social--Icons-Instagram" alt="Instagram" src="Images/footer__social--icons-instagram.png"/>
  </div>
</div>

弹性 justify-content 居中

flex justify-content centre

css

centering

flexbox