如何垂直居中未知高度的浮動元素？-css教學-PHP中文網

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

Mary-Kate Olsen

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

原創

261 人瀏覽過

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中文網其他相關文章！