水平对齐flex-items下面的文本

Question

图像标题由flexbox在底部对齐，位于图库中具有不同高度的图库中。我如何实现第一行文本（标题）水平对齐？

<style type="text/css"> 

    * { 
     box-sizing: border-box; } 

    .flex-container { 
     display: flex; 
     flex-wrap: wrap; } 

    .flex-item { 
     width: 50%; 
     padding: 20px; 
     display: flex; 
     flex-direction: column; } 

    .flex-item img { 
     width: 100%; 
     height: auto; } 

    .flex-image { 
     flex: 1 0 auto; } 

</style> 

<div class="flex-container"> 

    <div class="flex-item"> 
     <div class="flex-image"> 
      <img src="img-1.jpg" alt="" /> 
     </div> 
     <p>title</p> 
    </div> 

    <div class="flex-item"> 
     <div class="flex-image"> 
      <img src="img-2.jpg" alt="" /> 
     </div> 
     <p>title<br>Lorem ipsum dolor sit amet.</p> 
    </div> 

</div> 

请检查我codepen：https://codepen.io/tinusmile/pen/MoeORG

非常感谢！

Answer 1

使用现有的标记，图像可以有不同的高度，您需要做这样的事情，在那里你给p一个高度。

由于元素的溢出默认为visible，它将流出界限，所以我建议设置高度，以便它可以容纳2-3行文本。

在较小的屏幕上，您可能需要添加一个@media查询来调整该高度，就好像文本很长，它可能会溢出本身之下的任何元素。

.flex-item p { 
    height: 50px; } 

Updated codepen

---

注意，使用min-height而是将解决可能会溢出低于本身的任何元素问题，但它会使第一行，如果该值不迁就不水平对齐所有可能的线数。

---

另一种选择是去除flex-item包装和使用实现Flexbox的order财产，因为我在你的前面的问题的建议，align-horizontally-3-elements-over-3-divs