CSS 中的垂直對齊:了解細微差別
vertical-align 屬性可讓您將內聯元素垂直放置在其父元素內。然而,除非您掌握了基本原則,否則它的行為可能是不可預測的。
內聯元素和高度
垂直對齊僅影響內聯元素。諸如
之類的元素和
<div>是區塊級的並且不受影響。對於沒有固有行高的內聯元素,例如高度和垂直對齊
父元素的高度必須有一個靜態值(即不是自動或百分比)。如果不指定高度,瀏覽器會根據內容計算高度,這可能會導致意想不到的結果。
定位內聯元素
與text-align相反,適用於區塊級包含元素,垂直對齊應應用於要定位的內聯元素。
瀏覽器差異
較舊的瀏覽器可能不會一致地支援垂直對齊。然而,現代瀏覽器可以很好地處理它,即使在非內聯元素上使用也是如此。
範例:居中文字
例如,假設您有以下HTML:
<div>
要將文字在#inner 中垂直居中,請將Vertical-align: middle 應用於#header:
#header { display: inline-block; line-height: 1em; margin: 0; vertical-align: middle; }
請注意,在此範例中,#inner 是一個內聯塊具有固定高度的元素。
以上是CSS 中的垂直對齊實際上是如何運作的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!