保持flexbox中心时，文本换行到2行以上 [英] Keeping flexbox centered when text wraps to 2 or more lines
问题描述
我想集中两个 DIV 元素并列在一排flexbox（显示：弯曲）
I am trying to center two div elements side by side in a row with flexbox (display:flex).
第一个 DIV 元素，在左边，只是有一个形象。
The first div element, on the left, just has an image.
第二个 DIV 元素，在右边，有左对齐未指定长度的嵌入式文本。
The second div element, on the right, has left-aligned inline text of unspecified length.
在文本行是足够短，以适应在一行，双方的div对齐和合理的中心，我希望。
When the line of text is short enough to fit on one line, both divs are aligned and justified to the center as I expect.
在文本行是足够长的时间来包装成两行，第二个 DIV 元素不换行自己周围的内容如我所料。相反，它留下右侧的 DIV 。
When the line of text is long enough to wrap onto two lines, the second div element does not wrap itself around the content as I expect. Instead, it leaves a large white space on the right side of the div.
我嘲笑了一个例子在这里：的http：// codePEN .IO /匿名/笔/ NGqYQX？编辑= 110 。改变你的浏览器窗口的宽度明白我的意思。
I mocked up an example here: http://codepen.io/anon/pen/NGqYQX?editors=110. Vary your browser window's width to see what I mean.
如何设置第二个 DIV 元素萎缩自身以适应文本，这样既 DIV 元素出现在中心？
How can I set the second div element to shrink itself to fit the text, so that both div elements appear centered?
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样机展示什么，我试图做的：
Here is a Photoshop mockup showing what I am trying to do:
推荐答案
为了实现你的目标（如你的第二个图像指定），我们需要作出一些调整，以你的HTML和CSS。一切都可以用flexbox完成。
In order to achieve your goal (as specified in your second image) we need to make a few adjustments to your HTML and CSS. Everything can be done with 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;
}
这里发生了什么...... 的
Here's what's happening...
你的问题问：
保持flexbox时文本换行到2行以上为中心
Keeping flexbox centered when text wraps to 2 or more lines
我想中心二期div元素并列在一排flexbox（显示：弯曲）。
I am trying to center two div elements side by side in a row with flexbox (display:flex).
让我们赶紧去了你的两个图像。
Let's quickly go over your two images.
图片1
图片2
在图像1所有Flex项目实际上是居中。从Chrome浏览器开发工具的蓝色突出强调了这一点。每个项目都完全集中在屏幕上。
In image 1 all flex items are actually centered. The blue highlight from Chrome Dev Tools emphasizes this point. Each item is perfectly centered on the screen.
是的，它得到有点笨重，你重新大小的屏幕较小＆ndash的;主要是因为大字体大小和ndash的;但柔性的项目仍然保持居中。
Yes, it does get a bit clunky as you re-size the screen smaller – mostly because of the large font size – but the flex items remain centered nonetheless.
在图像2，柔性项目不均匀居中。你在你的实体模型所创建的更像是含有flexboxes列，而列的居中。但只有个别的第一行是位于屏幕中央。
In image 2, the flex items are not evenly centered. What you've created in your mock-up is more like a column containing both flexboxes, and the column is centered. But individually only the first row is centered on the screen.
有一个关于你的code两点要注意的：
A couple of notes about your code:
- 使用
理由含量的柔性容器宣布，你是围绕柔性的项目。柔性容器本身不居中。 - 由于两个flexboxes是的
＆LT直接的子女;身体GT;和＆LT;身体GT;没有定义宽度，flexboxes赞同相对于视口。
- With
justify-contentdeclared on the flex containers, you are centering the flex items. The flex container itself is not centered. - Since both flexboxes are direct children of the
<body>, and<body>has no defined width, the flexboxes align themselves in relation to the viewport.
因此，为了达到你想要的，我们可以换所有现有的标记在一个新的Flex容器的影响（＃柔性容器主体）。该功能可将原来的Flex容器到Flex项目，然后可以的均匀的中心为一组。
So to achieve the effect you want we can wrap all your existing mark-up in a new flex container (#flex-container-main). This converts the original flex containers into flex items, which can then be evenly centered as a group.
新柔性产品（现在归类为 .flex-容器子）给出的宽度来创建空间和基于所述图像的高度的最小高度。每个FLEX项目也宣告柔性父（显示：弯曲），它可以让我们在子元素使用的弯曲特性。特别是，该方法适用于垂直居中的文本（如图中的图像）。
The new flex items (now classed as .flex-container-child) are given a width to create space and a minimum height based on the height of the image. Each flex item is also declared a flex parent (display: flex) which allows us to use flex properties on child elements. In particular, this is useful for vertically centering the text (as shown in your images).
（请注意，我用的HTML语义元素是没有必要的code的工作。如果你preFER原 DIV 标签只是交换他们回来了。最重要的调整是新的父容器。）
(Note that my use of HTML semantic elements is not necessary for the code to work. If you prefer the original div tags just swap them back. The important adjustment is the new parent container.)
最后（这可能不是重要的是你的布局，但为了以防万一），浏览器通常会给图像空白在其底部边框小的差距。这是用来容纳的伸的。随着垂直对齐：底部，这个空间将被删除。 （详情请参见我的回答对下行的。）
Lastly (and this may not be important to your layout but just in case), browsers normally give images a small gap of whitespace under their bottom border. This is used to accommodate descenders. With vertical-align: bottom, this space is removed. (For more details see my answer about descenders.)
这篇关于保持flexbox中心时，文本换行到2行以上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
