如何垂直居中未知高度的浮动元素？-css教程-PHP中文网

如何垂直居中未知高度的浮动元素？

Mary-Kate Olsen

发布： 2024-11-01 04:18:02

原创

260 人浏览过

How to Vertically Center Floating Elements of Unknown Heights?

垂直居中对齐未知高度的浮动元素

问题：

您有一个水平居中两个的容器元素不同高度的浮动元素。默认情况下，这些浮动与容器的顶部对齐。如何使它们垂直居中？

答案：

直接垂直对齐浮动是不可能的，因为它们遵循优先对齐到顶部的特定对齐规则。但是，您可以通过利用浮动元素可以包含在建立新的块格式化上下文 (BFC) 的元素中的规则来实现此效果。

解决方案：

使用 display: inline-block 将每个浮动包装在行内级元素中。这会在浮动周围创建一个 BFC 并允许垂直对齐。
使用vertical-align 垂直对齐内联块包装器。
确保包装器有足够的宽度来容纳其内容，否则它们之间可能会出现空格。

示例：

<code class="css">.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%;
}</code>

登录后复制

<code class="html"><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></code>

登录后复制

以上是如何垂直居中未知高度的浮动元素？的详细内容。更多信息请关注PHP中文网其他相关文章！