47

我有一个（水平）居中的外部 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;

但我只是好奇是否有办法用花车做到这一点。

4

3 回答 3

58

您不能直接执行此操作，因为浮动与顶部对齐：

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

确切的规则说（强调我的）：

  1. 浮动框的外部顶部不得高于其包含块的顶部。
  2. 浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。
  3. 元素浮动框的外部顶部不得高于包含源文档中较早元素生成的框的任何行框的顶部。

  1. 浮箱必须放置在尽可能高的位置。

也就是说，您可以利用规则 #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>

于 2012-09-24T02:15:03.250 回答
10

另一种方法是使用-如果您有两个部分flex，它可以替代 a 。float一个（浮动）将具有自动大小，第二个将增长到占据整个容器。在您选择的交叉轴上center，瞧，您将获得浮动和居中元素的效果。

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

于 2015-01-01T12:46:58.820 回答
3

不，这是表格单元格突然看起来是个好主意的时候。如果它是固定高度，您可以使用 line-height。

于 2012-09-24T01:49:55.063 回答