為什麼我的內聯塊元素垂直不對齊？

揭開內聯塊元素垂直未對齊的神秘面紗

遇到一個令人費解的CSS 問題，即內聯塊元素的內容出現垂直未對齊？罪魁禍首可能是預設的垂直對齊值。

內聯塊元素具有預設的基線垂直對齊方式，它將框的基線與其父元素的基線對齊。當元素不包含流內行框或具有可見以外的溢出值時，這可能會導致意外對齊。

考慮以下 HTML 和 CSS：

<div>
<pre class="brush:php;toolbar:false">#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

在此範例中，「.divAccountData」元素與「.divAccountPicker」相比看起來向下移動。將文字新增至“.divPutTextToFixIssue”會神奇地垂直對齊元素。

此行為是由於內聯塊元素的基線由其最後一個行框的基線確定的事實而產生的。透過向“.divPutTextToFixIssue”添加文本，我們有效地更改了基線並強制對齊到頂部。

但是，如果兩個區塊包含不同的行數，則對齊將再次中斷。為了確保一致的垂直對齊，請使用 Vertical-align 屬性強制對齊：

.divAccountData {
  vertical-align: top;
}

這會將“.divAccountData”的基線與“.divAccountPicker”的頂部對齊，無論其行數如何。