CSS 中的垂直對齊實際上是如何運作的？

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