当子文本换行到 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;
}
事情是这样的...
您的问题是:
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 居中。但单独只有第一行位于屏幕中央。
关于您的代码的几点注意事项:
- 在 flex 容器上声明
justify-content
后,您将 flex 项目居中。弹性容器本身没有居中。
- 由于两个 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 被删除。 (有关详细信息,请参阅 。)
我正在尝试使用 flexbox (display:flex
) 将两个 div
元素并排居中。
左侧的第一个 div
元素只有一个图像。
右侧的第二个 div
元素具有未指定长度的左对齐内联文本。
当文本行短到可以放在一行中时,两个 div 都会对齐并居中对齐,正如我所期望的那样。
当文本行足够长可以换行时,第二个 div
元素不会像我预期的那样将内容换行。相反,它会在 div
.
我在这里模拟了一个例子: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;
}
事情是这样的...
您的问题是:
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 居中。但单独只有第一行位于屏幕中央。
关于您的代码的几点注意事项:
- 在 flex 容器上声明
justify-content
后,您将 flex 项目居中。弹性容器本身没有居中。 - 由于两个 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 被删除。 (有关详细信息,请参阅