flex合理性-内容中心

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

如果使用列，则需要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>

​

否则，在childs上自动刷新，这里是演示的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>

​

Answer 2

我不建议使用图片标题text...actual文本，可以阅读屏幕阅读器和索引谷歌是非常可取的。

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

​

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

​