如何在 div 內垂直對齊內聯/內聯塊元素？

內聯/內聯塊元素的CSS垂直對齊

當嘗試在div內垂直對齊內聯或內聯塊元素時，它值得注意的是，vertical-align 屬性適用於子元素，而不是父元素。在提供的 HTML 和 CSS 中，由於將垂直對齊應用於 div 元素，跨度頑固地向下移動。

要正確垂直對齊元素，請將Vertical-align 屬性應用於div 內的子元素:

div > * {
    vertical-align: middle;  // Align children to middle of line
}

此修改將確保div 中的所有內聯和內聯塊元素按預期垂直對齊： [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

附加說明：

附加說明： 垂直對齊是相對於目前文字行的，而不是父div的高度。若要在比對齊元素高的 div 中實現垂直居中，請設定 div 的 line-height 屬性而不是其高度。請參閱更新後提供的 JSFiddle 範例進行示範。

以上是如何在 div 內垂直對齊內聯/內聯塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！