為什麼內聯塊元素垂直不對齊，如何修復？

內聯塊元素的垂直對齊差異

為什麼內容為垂直的內聯塊元素未對齊？

說明：

CSS 屬性vertical-align 預設將元素的基線與父元素的基線對齊。如果元素沒有流入行框或其溢出屬性不可見，則基線與下邊距邊緣對齊。

在提供的範例中，.divAccountData 元素最初缺少內容。結果，它的基線與其父元素的下邊距對齊，導致與 .divAccountPicker 元素未對齊。

解：

要垂直對齊兩個元素，將.divAccountData 元素的Vertical-align 屬性設為top：

.divAccountData {
  vertical-align: top;
  /* Other CSS properties... */
}

這可確保.divAccountData 元素的基線與.divAccountPicker 元素的上緣對齊。

其他注意事項：

• 也可以透過新增文字來解決該問題到.divAccountData 元素，該元素建立一個流入行框並重置基線。
• 基線對齊方式受每個元素中的行數影響。如果行數不同，則需要在兩個元素上使用vertical-align: top 強制垂直對齊。

以上是為什麼內聯塊元素垂直不對齊，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！