Question

我有一个（水平）居中的外部div包含两个未知宽度的元素：

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

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

我最终做了外部分组

display: table

和内部div

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

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

Answer 1

您无法直接执行此操作，因为floats与顶部对齐：

如果有线框，则浮动框的外部顶部对齐在当前行框的顶部。

确切的rules说（强调我的）：

浮动框的outer top可能不会高于其containing block的顶部。

浮动框的outer top可能不会高于由block生成的floated或outer top框的外部顶部   元素前面的元素。

元素浮动框的line-box可能不会高于包含由框生成的框的任何inline-level的顶部   元素前面的元素。




浮动框必须尽可能高。

那就是说，你可以利用规则＃4：

将每个浮点放置在建立新block formatting context / BFC的vertical-align元素内，例如display: inline-block。
这些包装器将包含浮动因为它们建立一个BFC，并且它们将是另一个，因为它们是内联级别的。
使用How to remove the space between inline-block elements?垂直对齐这些包装。

请注意，内联块包装器之间可能会出现一些空间。请参阅{{3}}进行修复。

.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。一个（浮动）将具有自动尺寸，第二个将增长以占据整个容器。在十字轴上选择center并瞧，你有浮动和居中元素的效果。

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

Answer 3

没有，这就是表格细胞突然变得好主意的时候。如果它是固定高度，您可以使用行高。

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

3 个答案: