当子文本换行到 2 行或更多行时,保持 flexbox 容器居中

Keeping flexbox container centered when child text wraps to 2 or more lines

我正在尝试使用 flexbox (display:flex) 将两个 div 元素并排居中。

左侧的第一个 div 元素只有一个图像。

右侧的第二个 div 元素具有未指定长度的左对齐内联文本。

当文本行短到可以放在一行中时,两个 div 都会对齐并居中对齐,正如我所期望的那样。

当文本行足够长可以换行时,第二个 div 元素不会像我预期的那样将内容换行。相反,它会在 div.

的右侧留下一个大的白色 space

我在这里模拟了一个例子:http://codepen.io/anon/pen/NGqYQX?editors=110。改变浏览器 window 的宽度以了解我的意思。

如何设置第二个 div 元素使其自身缩小以适合文本,以便两个 div 元素都居中显示?

HTML:

<div class="flexbox-container">   
    <div class="div1">
        <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
    </div>
    <div class="div2">
        This is an example of a line of text.
    </div> 
</div>
<br>
<div class="flexbox-container">
    <div class="div1">
        <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
    </div>
    <div class="div2">
        This is an example of a much loooooooooooooonger line of text.
    </div>
</div>

CSS:

.flexbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.div1 {
  margin-right: 30px;
}

.div2 {
  font-size: 48px;
  line-height: 48px;
  text-align: left;
}

这是一个 Photoshop 模型,展示了我正在尝试做的事情:

为了实现您的目标(如您的第二张图片所示),我们需要对您的 HTML 和 CSS 进行一些调整。一切都可以用 flexbox 来完成。

HTML

<div id="flex-container-main">

    <div class="flex-container-child">
        <figure>
            <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
        </figure>
        <p>This is an example of a line of text.</p> 
    </div>

    <div class="flex-container-child">
        <figure>
            <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
        </figure>
        <p>This is an example of a much loooooooooooooonger line of text.</p>
    </div>

</div><!-- end #flex-container-main -->

CSS

#flex-container-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-container-child {
    display: flex;
    align-items: center;
    min-height: 127px;
    width: 75%;
    margin: 10px;
}

figure {
    margin: 0 20px 0 0;
    }

img {
    width: 150px;
    height: 127px;
    vertical-align: bottom;
} 

p { 
    font-size: 48px;
    margin: 0;
}

Revised Codepen Demo


事情是这样的...

您的问题是:

Keeping flexbox centered when text wraps to 2 or more lines

I am trying to center two div elements side by side in a row with flexbox (display:flex).

让我们快速浏览一下您的两张图片。

图片 1

图 2

在图 1 中,所有弹性项目实际上都居中。 Chrome Dev Tools 中的蓝色突出显示强调了这一点。每个项目都完美地位于屏幕中央。

是的,当您将屏幕调整得更小时,它确实有点笨拙——主要是因为字体较大——但弹性项目仍然居中。

在图 2 中,弹性项目没有均匀居中。您在模型中创建的内容更像是包含两个 flexbox 的列,并且 column 居中。但单独只有第一行位于屏幕中央。

关于您的代码的几点注意事项:

  1. 在 flex 容器上声明 justify-content 后,您将 flex 项目居中。弹性容器本身没有居中。
  2. 由于两个 flexboxes 都是 <body> 的直接子元素,并且 <body> 没有定义宽度,因此 flexboxes 会根据视口对齐。

因此,为了达到您想要的效果,我们可以将您现有的所有标记包装在一个新的 flex 容器中 (#flex-container-main)。这会将原始的弹性容器转换为弹性项目,然后可以均匀作为一个组居中。

新的 flex 项目(现在分类为 .flex-container-child)被赋予创建宽度 space 和基于图像高度的最小高度。每个 flex 项目也被声明为 flex parent (display: flex),这允许我们在子元素上使用 flex 属性。特别是,这对于垂直居中文本很有用(如您的图片所示)。

(请注意,我对 HTML 语义元素的使用并不是代码工作所必需的。如果您更喜欢原始的 div 标签,只需将它们交换回来即可。重要的调整是新父级容器。)

最后(这对您的布局可能并不重要,但以防万一),浏览器通常会在图像的底部边框下方留出一小段白色space。这用于容纳 descenders。使用 vertical-align: bottom,此 space 被删除。 (有关详细信息,请参阅 。)