如何垂直中间对齐未知高度的浮动元素？

Question

我有一个(水平)居中的外部div包含两个未知宽度的元素:

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

默认情况下,两个浮动都是顶部对齐的,并且具有不同/未知和不同的高度.有没有办法让它们垂直居中？

我最终做了外部div

display: table

和内在的div

display: table-cell;
vertical-align: middle;
text-align: left/right;

但我很好奇是否有办法用花车来做这件事.

Answer 1

你不能直接这样做,因为浮动与顶部对齐:

如果有行框,则浮动框的外部顶部与当前行框的顶部对齐.

确切的规则说(强调我的):

4. 浮动盒的外顶部可能不高于其包含块的顶部.
5. 浮动框的外部顶部可能不高于源文档中较早的元素生成的任何块或浮动框的外部顶部.
6. 元素浮动框的外部顶部可能不会高于包含由源文档中较早的元素生成的框的任何行框的顶部.

8. 浮动箱必须尽可能高.

也就是说,你可以利用规则#4:

• 将每个浮点放在内联级元素中,以建立新的块格式化上下文/BFC),例如display: inline-block.
• 这些包装器将包含浮动因为它们建立BFC,并且它们将是另一个,因为它们是内联级别的.
• 用于vertical-align垂直对齐这些包装.

请注意,内联块包装器之间可能会出现一些空间.请参见如何删除内联块元素之间的空间？要解决这个问题.

.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>

Answer 2

另一种方法是使用flex- float如果你有两个部分,它可以替代a .一个(浮动)将具有自动尺寸,第二个将增长以占据整个容器.在您选择的十字轴上,您center可以获得浮动和居中元素的效果.

这是关于flex的美丽备忘单:http://jonibologna.com/flexbox-cheatsheet/