flex justify-content center

Question

我正在创建一个移动的第一个网站，我正在尝试使用flex来集中我的标题。我希望容器的子项居中。我也尝试过不使用flex，将子项的边距设置为auto，但这似乎也没有居中。我哪里错了？

守则

.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编制索引的实际文字更受欢迎。

但是，我认为你想要这样的东西：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您使用列，则需要align-items:center;

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

否则，孩子的保证金自动，此处为演示的h1

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;