CSS 如何垂直居中对齐未知高度的浮动元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12557897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically middle-align floating elements of unknown heights?
提问by Yang
I have a (horizontally) centered outer div containing two elements of unknown width:
我有一个（水平）居中的外部 div，其中包含两个未知宽度的元素：
<div style='width:800px; margin:0 auto'>
<div style='float:left'>...</div>
<div style='float:right'>...</div>
</div>
Both floats are top-aligned by default, and are of varying/unknown and different heights. Is there any way to make them vertically centered?
默认情况下，两个浮动都是顶部对齐的，并且具有不同/未知和不同的高度。有没有办法让它们垂直居中？
I eventually made the outer div
我最终做了外部 div
display: table
and the inner divs
和内部 div
display: table-cell;
vertical-align: middle;
text-align: left/right;
but I'm just curious if there's a way to do this with the floats.
但我只是好奇是否有办法用花车做到这一点。
回答by Oriol
You can't do this directly, because floatsare aligned to the top:
您不能直接执行此操作，因为浮点数与顶部对齐：
If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
如果有行框，则浮动框的外顶部与当前行框的顶部对齐。
The exact rulessay (emphasis mine):
确切的规则说（强调我的）：
- A floating box's outer topmay not be higher than the top of its containing block.
- The outer topof a floating box may not be higher than the outer top of any blockor floatedbox generated by an element earlier in the source document.
- The outer topof an element's floating box may not be higher than the top of any line-boxcontaining a box generated by an element earlier in the source document.
- A floating box must be placed as high as possible.
- 浮动框必须放置得尽可能高。
That said, you can take advantage of rule #4:
也就是说，您可以利用规则#4：
- Place each float inside inline-levelelements that establish a new block formatting context/BFC), e.g.
display: inline-block. - These wrappers will contain the floats because they establish a BFC, and will be one next to the other because they are inline-level.
- Use
vertical-alignto align these wrapper vertically.
- 将每个浮点数放置在建立新块格式上下文/BFC 的行内级元素中，例如.
display: inline-block - 这些包装器将包含浮点数，因为它们建立了 BFC，并且因为它们是内联级的，所以它们彼此相邻。
- 用于
vertical-align垂直对齐这些包装纸。
Be aware that some space might appear between the inline-block wrappers. See How to remove the space between inline-block elements?to fix it.
请注意，内联块包装器之间可能会出现一些空间。请参阅如何删除内联块元素之间的空间？要解决这个问题。
.float-left {
float: left;
}
.float-right {
float: right;
}
#main {
border: 1px solid blue;
margin: 0 auto;
width: 500px;
}
/* Float wrappers */
#main > div {
display: inline-block;
vertical-align: middle;
width: 50%;
}<div id="main">
<div>
<div class="float-left">
<p>AAA</p>
</div>
</div>
<div>
<div class="float-right">
<p>BBB</p>
<p>BBB</p>
</div>
</div>
</div>回答by greenoldman
Another approach would be to use flex-- it could be a replacement for a floatif you have two parts. One (floating) would be of auto size, and the second would grow to occupy entire container. On the cross axis you pick centerand voila, you have the effectof the float and centered elements.
另一种方法是使用flex-float如果您有两个部分，它可以替代 a 。一个（浮动）将具有自动大小，第二个将增长以占据整个容器。在你选择的交叉轴上center，你有浮动和居中元素的效果。
Here is beautiful cheatsheet about flex: http://jonibologna.com/flexbox-cheatsheet/
这是关于 flex 的漂亮备忘单：http: //jonibologna.com/flexbox-cheatsheet/
回答by Trent Stewart
Nope this is when table cells suddenly seem like a great idea. If it is a fixed height you can use line-height.
不，这是表格单元格突然看起来是个好主意的时候。如果它是固定高度，您可以使用 line-height。
