首頁 > web前端 > css教學 > 主體

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

Mary-Kate Olsen
發布: 2024-11-01 04:18:02
原創
235 人瀏覽過

How to Vertically Center Floating Elements of Unknown Heights?

垂直居中對齊未知高度的浮動元素

問題:

您有一個水平居中兩個的容器元素不同高度的浮動元素。預設情況下,這些浮動會與容器的頂部對齊。如何使它們垂直居中?

答案:

直接垂直對齊浮動是不可能的,因為它們遵循優先對齊到頂部的特定對齊規則。但是,您可以透過利用浮動元素可以包含在建立新的區塊格式化上下文 (BFC) 的元素中的規則來實現此效果。

解決方案:

  1. 使用 display: inline-block 將每個浮動包裝在行內級元素中。這會在浮動周圍建立一個 BFC 並允許垂直對齊。
  2. 使用vertical-align 垂直對齊內聯塊包裝器。
  3. 確保包裝器有足夠的寬度來容納其內容,否則它們之間可能會出現空格。

範例:

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板