垂直對齊與vertical-align屬性

在網頁設計領域，垂直對齊在增強視覺美感和有效地組織內容。 CSS Vertical-align 屬性提供了一種在父元素中垂直定位內聯元素的方法，使開發人員能夠精確對齊。然而，理解其複雜性可能是一項令人困惑的任務。

確定垂直對齊

要掌握垂直對齊的機制，我們首先必須承認它只適用於內聯元素。這些元素（例如 、 或區塊級元素中的文字）佔據一行並且沒有隱式高度。此外，為缺乏固有行高的元素指定行高是必不可少的。

父元素的 height 屬性必須擁有靜態值才能使垂直對齊生效。自動或百分比值是不夠的。此外，各種現代瀏覽器在非內聯元素上準確渲染垂直對齊時遇到困難。

對齊的元素選擇

一個常見的誤解是垂直對齊應用於容器元素，類似於文字對齊。但是，應該將其分配給需要垂直定位的元素。例如，如果我們希望將

標記在

中居中，則應將 Vertical-align 屬性直接應用於

。

實際範例

考慮以下HTML 和CSS程式碼:

HTML:

 CSS:
#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}
直覺上，人們可能會期望 
 元素在 
 元素內垂直居中。然而，事實並非如此。要理解原因，重要的是要記住垂直對齊是在父元素中逐行進行的。因此，如果
元素的內容超過一行，
將不會如預期對齊。 
為了說明這個概念，我們可以修改HTML程式碼：
如您所見，
 元素現在在父元素內垂直居中，因為垂直對齊基於文字的行高。