在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 元素：
xghxgh
假設設定段落的字型大小為 120px，span 元素的字型大小為 40px、vertical-align 的值為 20px：
p span
由於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
使用預定義關鍵字時，是根據預定義的對齊準則，來決定行內級框在行框中的位置。預定義關鍵字有 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 元素：
xghbaseline…top
為段落定義 1.8 倍的行距，並讓每個子元素 span 以不同的方式垂直對齊。由於子元素 span 會繼承父元素的 line-height 屬性，因此，把 span 元素的行距重置為1：
p span
span:nth-child(1)
…span:nth-child(8)
在google chrome瀏覽器下的執行效果如圖 3‑17 所示：
圖3-17 vertical-align屬性效果
雖然w3c規範對 vertical-align屬性已經定義得非常清楚，然而，現實的情況是，不同瀏覽器的解釋卻千差萬別，甚至與規範相去萬里。比如，在增加行高時，行框的高度會增加，text-top對齊將會是行內元素的頂線與行框文字的頂線對齊。但從執行結果看，並不是這個樣子，似乎是行內元素的基線與行框文字的頂線對齊。
在所有的css屬性中，vertical-align屬性是最讓人費解的乙個，因為幾乎在所有瀏覽器下的表現都各不相同，讓人匪夷所思。
關於作者
CSS之垂直對齊
vertical align baseline 預設。元素放置在父元素的基線上。sub 垂直對齊文字的下標。super 垂直對齊文字的上標 top 把元素的頂端與行中最高元素的頂端對齊 text top 把元素的頂端與父元素字型的頂端對齊 middle 把此元素放置在父元素的中部。bottom 把元...
css垂直對齊 6個CSS技巧以垂直對齊內容
讓我們來談談css中的垂直對齊，或者更確切地說是如何不可行的。css尚未提供將容器內的內容垂直居中的官方方法。這個問題可能使各地的web開發人員感到沮喪。但是不要害怕，在這篇文章中，我們將由您來指導一些技巧，這些技巧可以幫助您模仿效果。我們將在這裡看到的第乙個技巧是使用position屬性。您有兩個...
CSS 布局 水平 垂直對齊
元素居中對齊 要水平居中對齊乙個元素，可以使用 margin auto 設定到元素的寬度將防止它溢位到容器的邊緣 元素通過指定寬度，並將兩邊的空外邊距平均分配 水平居中塊級元素 如 div 可以使用 marig auto 注意 使用 margin auto 無法相容 ie8，除非 doctype 已...