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

小编典典

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

css

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

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

阅读 320

2020-05-16

共1个答案

小编典典

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

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

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

浮动框的外部顶部不得高于其包含的块的顶部。
浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。
元素的浮动框的外部顶部不得高于包含由源文档中前面的元素生成的框的任何行框的顶部。

必须将浮动框放置在尽可能高的位置。

也就是说，您可以利用规则4：

将每个float放置在建立新块格式化上下文/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>

2020-05-16