了解內聯塊元素的垂直對齊

雖然文件表明垂直對齊適用於內聯塊元素，但當它無法按預期對齊。為了澄清這一點，讓我們更深入地研究這個概念。

Vertical-Align 的範圍

與text-align 不同，text-align 在其父元素的內容區域內調整文本對齊方式，vertical-align對齊在元素的行框中進行操作。行框是包含由單行上的行內級元素產生的框的矩形區域。

範例：

考慮以下程式碼：

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

 問題：
在此範例中，設定Vertical-align: middle 不會使#content 元素在垂直方向上居#wrapper div.
說明：
vertical-align不對齊inline-block 元素相對於其容器區塊，但位於其自己的行框中。由於 #content 元素僅包含文本，該文本已根據其預設的 Vertical-align: 基線垂直居中，因此對最終對齊沒有影響。 
結論：
 
當使用內聯區塊元素的垂直對齊時，必須了解它對齊元素的行框內的內容，而不是其包含區塊內的內容。請記住這一點，以在頁面元素中實現所需的垂直定位。