在 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 属性，正如我在您之前的问题

在 flex-items 下方水平对齐文本

Horizontal align text below flex-items

flexbox

text-alignment