CSS 垂直對齊vertical-align屬性

在CSS中，行框的高度總是足以容納它包含的所有行內級框，當一個行內級框 B 的高度小於包含它的行框高度時，則由 vertical-align屬性 來決定B在行框中垂直對齊的位置。因此，vertical-align屬性只對行內級元素有效，對塊級元素無效。並且，該屬性不能被子元素繼承。
在垂直對齊時，行內非替換元素的行內級框是由 line-height 的高度定義的框，即在內容區的上下各添加半行距後的框；其他行內級元素的行內級框是由 margin-box 定義的框。因此，對一個行內級框來說，top 是指框的上邊界，bottom 是指框的下邊界，text-top 是指內容區的上邊界，text-bottom 是指內容區的下邊界。
由於替換元素沒有 baseline，因此，就把它的 bottom 作為 baseline，即 baseline 和 bottom 的位置相同。
middle 是指框高度一半的位置，對於替換元素，就是 height 的一半的位置，而非替換元素則是基於 baseline 往上移動 0.5ex，即小寫字母 x 的正中心。但是，很多瀏覽器往往把 ex 這個單位定義為0.5em，導致 middle 其實不一定是 x 的正中心。如圖 3‑15 所示：
圖3-15 行內級框
vertical-align屬性可以使用長度值、百分比、或預定義關鍵字，來定義行內級框的垂直對齊方式。該屬性的默認值是 baseline，也就是說，默認情況下，所有行內級框的基線都與父元素的基線對齊。
使用長度值和百分比時，通過讓行內級框的基線相對父元素的基線，升高或降低指定的距離，來決定行內級框在行框中的位置。距離可以是正值，也可以是負值。正值使行內級框相對父元素的基線升高，負值則降低。
使用長度值時，可以使用絕對單位或相對單位，來指定升高或降低的距離，0cm 等同於 baseline。假設在一個段落中，包含一個 span 元素：

<p>xgh<span><span>xgh</p></code>
假設設置段落的字體大小為 120px，span 元素的字體大小為 40px、vertical-align 的值為 20px：

p { font-size: 120px;}span { font-size: 40px; vertical-align: 20px;}
由於vertical-align 的值為 20px，所以，行內框 span 的基線相對父元素的基線升高 20px。運行結果如圖 3‑16 所示：
圖3-16 vertical-align為長度值
使用百分比時，升高或降低的距離是根據行內元素的 line-height 進行計算，0% 等同於 baseline。
如果把 span 元素的 line-height 設置為 1，vertical-align 設置為 50%，則得到的行高為 40px，進而得到升高的距離為 50% * 40px = 20px，也會得到相同的效果。

span { line-height: 1; font-size: 40px; vertical-align: 50%;}
使用預定義關鍵字時，是根據預定義的對齊准則，來決定行內級框在行框中的位置。預定義關鍵字有 baseline | sub | super | top | text-top | middle | bottom | text-bottom，默認值為baseline。根據W3C規範，不同取值的含義見表 3‑4：

表 3-4 vertical-align屬性值及含義

屬性值	含義
baseline	基線對齊。行內框的基線與父元素的基線對齊
sub	下標對齊。將行內框的基線下降到父元素適合下標的位置
super	上標對齊。將行內框的基線上升到父元素適合下標的位置
top	頂部對齊。行內框的頂線與行框的頂線對齊。
text-top	文本頂部對齊。行內框的頂線與父元素的text-top對齊
middle	居中對齊。行內框的中線與父元素的中線對齊
bottom	底部對齊。行內框的底線與行框的底線對齊
text-bottom	文本底部對齊。行內框的底線與父元素的text-bottom對齊

基線對齊要求一個行內級框的基線與行框的基線對齊，而對於圖像和表單輸入元素和其他替換元素，由於它們本身沒有基線，則將它們的底線與行框的基線對齊。這就使得瀏覽器總把替換元素的底線放在基線上，即便該行中沒有其他文本。
上標對齊和下標對齊時，是行內元素的基線（圖片和文本輸入框的底線）相對於行框的基線上移或下移。而行內元素基線相對於行框的基線移動的距離，CSS規範中未明確規定，由瀏覽器自行決定，可能會因為瀏覽器的不同而不同。從上圖的運行結果看，在Google Chrome瀏覽器下，移動的距離約為 1ex。
middle居中對齊，是行內元素的中線與行框的中線對齊。前面已經介紹，元素的中線與基線的距離為小寫字母x高度（即ex）的一半，而大部分瀏覽器簡單的認為1ex = 1em，因此會將基線以上二分之一em處（其實不一定是x的正中心），作為文本的中線。前面已經介紹，一個框的高度是由line-height決定的，如果增加行高，框的高度會增加，頂線就會上移，底線會下移。無論底線下移多少，bottom對齊，始終是元素的底線與行框的底線對齊；top對齊，始終是元素的頂線與行框的頂線對齊。增加行高時，行框的高度會增加，但內容區的高度始終保持不變，text-top對齊就是行內元素的頂線與行框文本的頂線對齊。
垂直對齊的預定義關鍵字看似簡單，其實很難理解，處理起來也很棘手。下面通過一個簡單實例，來看看每個預定義關鍵字的效果。假設在一個段落中，有 8 個 span 元素：

<p>xgh<span>baseline</span>…<span>top</span></p>
為段落定義 1.8 倍的行距，並讓每個子元素 span 以不同的方式垂直對齊。由於子元素 span 會繼承父元素的 line-height 屬性，因此，把 span 元素的行距重置為1：

p { line-height: 1.8; font-size: 90px; font-family: "Times New Roman"; border: 1px solid #444;}span { line-height: 1; color: #00f; font-size: 20px;}span:nth-child(1) { vertical-align: baseline;}…span:nth-child(8) { vertical-align: top; }
在Google Chrome瀏覽器下的運行效果如圖 3‑17 所示：
圖3-17 vertical-align屬性效果
雖然W3C規範對 vertical-align屬性已經定義得非常清楚，然而，現實的情況是，不同瀏覽器的解釋卻千差萬別，甚至與規範相去萬裏。比如，在增加行高時，行框的高度會增加，text-top對齊將會是行內元素的頂線與行框文本的頂線對齊。但從運行結果看，並不是這個樣子，似乎是行內元素的基線與行框文本的頂線對齊。
在所有的CSS屬性中，vertical-align屬性是最讓人費解的一個，因為幾乎在所有瀏覽器下的表現都各不相同，讓人匪夷所思。
關於作者
歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭秘CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。





暑期編程PK賽


得CSDN機械鍵盤等精美禮品！