在flexbox中垂直居中文本< div> [英] Vertically centering text inside flexbox <div>
问题描述
我试图将一些文本垂直居中在一个div。听起来很容易，但我不能得到它。这里的代码，对不起格式化和做法的错误，它的东西whipped快速和脏：
I'm trying to vertically center some text inside a div. Sounds easy but I can't get it. Here's the code, sorry for the bad formatting and practices, it's something whipped up fast and dirty:
<html>
<body>
<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
<div id="first" style=" min-height:100px; min-width:200px; background-color:green" >
<div style="vertical-align:middle">
first box
</div>
</div>
<div id="second" style=" min-height:100px; min-width:200px; background-color:yellow" >
<div style="vertical-align:middle">
second box
</div>
</div>
<svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300"
preserveAspectRatio="xMidYMid meet" height="100%" width:"auto">
<!--snipped away svg code-->
</svg>
<div id="third" style="min-height:100px; min-width:200px; background-color:red" >
<div style="">
third box
</div>
</div>
<div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
<p>
fourth box
</p>
</div>
</div>
可以看到，中央svg图像周围有四个框。水平居中在容器div内的元素很容易，垂直居中的每个元素内的文本不是。
As you can see, there's four boxes around a central svg image. Horizontally centering the elements inside the "container" div was easy, vertically centering the text inside each of those elements is not. Not at all.
我尝试了各种解决方案，没有一个像预期的那样工作（文本只是上升到框的顶部）。我缺少明显的东西，或者我想做一些不可能的事情？
I've tried various solutions, none of which worked like intended(the text just goes up to the top of the box). Am I missing something obvious or am I trying to do something impossible?
我在Chrome 46上进行测试，我正在寻找一个灵活的解决方案，它可以在不知道盒子或容器的像素精确高度的情况下工作
I'm testing this on Chrome 46 and I'm looking for a flexible solution, something that can work without knowing the exact height in pixels of the boxes nor the container
推荐答案
Flexbox使得垂直和水平居中很容易。在这种情况下，您不需要使用 vertical-align 。
Flexbox makes it pretty easy to center things vertically and horizontally. You don't need to use vertical-align in this case.
这里有两件事要考虑： / p>
Here are two things to consider:
-
创建flex容器时，只有子元素成为flex项。
When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.
您的 div不适用于所有子级以上的任何后代元素 包装您的文本的框不是flex项目。它们是flex项目的子项（ #first ， #second 等）和flex属性不适用。
Your div boxes wrapping your text are not flex items. They are children of flex items (#first, #second, etc.) and flex properties don't apply.
如果要将flex属性应用于flex项目的子项，则还需要将flex项目作为flex容器。
If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well.
尝试以下操作：
#first {
display: flex;
justify-content: center;
align-items: center;
}
#second {
display: flex;
justify-content: center;
align-items: center;
}
DEMO： http://jsfiddle.net/fv5j4kob/1/
Re： vertical-align
Re: vertical-align
vertical-align的原因：middle 无效，因为此属性位于内联维度中心。所以它实际上是垂直中心的文本...在其行高。要获得期望的行为，请指定等于容器高度的 line-height 。
The reason vertical-align: middle wasn't working for you is because this property centers within the inline dimension. So it actually was vertically centering the text... within its line-height. To get the behavior you expect, specify a line-height equal to the container height.
#third {
vertical-align: middle;
line-height: 100px;
}
DEMO： http://jsfiddle.net/fv5j4kob/2/
这篇关于在flexbox中垂直居中文本< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
