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

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

1 个答案: