摘要：引言說起大家都知道他是用在對相鄰的文字和內(nèi)聯(lián)元素上，比如常見的將一個(gè)圖標(biāo)和相鄰的文字居中對齊。每個(gè)內(nèi)聯(lián)元素也有其自己的基線，頂線和底線。內(nèi)聯(lián)元素的基線位置低于行框的基線。內(nèi)聯(lián)元素的基線相對于行框基線移動(dòng)相應(yīng)于行高百分比的數(shù)值。

平時(shí)遇到vertical-align時(shí)候會(huì)有各種抓狂的時(shí)刻，調(diào)來調(diào)去雖然也弄好了但是心里面一直很虛，因?yàn)橐恢睕]有透徹理解過這個(gè)屬性，搜索時(shí)候發(fā)現(xiàn)了一篇很棒的文章，算是半翻譯吧，把這個(gè)屬性好好總結(jié)一下。

說起vertical-align大家都知道他是用在對相鄰的文字和內(nèi)聯(lián)元素上，比如常見的將一個(gè)圖標(biāo)和相鄰的文字居中對齊。但是當(dāng)你不了解他的機(jī)制時(shí)候經(jīng)常會(huì)讓你抓狂，因此我們一次來攻克這個(gè)規(guī)則的玄機(jī)。

vertical-align用來對齊內(nèi)聯(lián)級元素，也就是display值為inline、inline-block或者inline-table（這個(gè)通常不考慮了）的元素。
inline元素也就是包含文字的最基本的標(biāo)簽如span等
inline-block，顧名思義就是表現(xiàn)為行內(nèi)的塊級元素，可以設(shè)置寬度、高度和間距邊框等。

內(nèi)聯(lián)級元素以行的形式相鄰排列在一起，一旦有更多的內(nèi)聯(lián)級元素超過當(dāng)前行能容納的長度，就會(huì)在其下面產(chǎn)生一個(gè)新行。也就是我們常說的line box（行框），行框包含其行內(nèi)所有內(nèi)容。不同尺寸的內(nèi)容意味著行框也有不同的高度。下圖就用紅線標(biāo)注了三個(gè)行框的top和bottom。

行框勾勒出了這些內(nèi)容占據(jù)的區(qū)域，其中vertical-align就負(fù)責(zé)對行框中的各個(gè)元素進(jìn)行對齊。問題來了，這些元素都是相對于哪些線對齊呢？

垂直對齊最關(guān)鍵的參考線就是元素的基線baselines，在某些情況下元素的包含盒的頂端線tops和底端線bottoms也變得很重要。下面就分別看看各種類型元素的baselines、tops和bottoms。

如圖所示，有三行不同標(biāo)線的文字。紅線代表line-height的頂端和底端；綠線代表文字字體的高度，這里需要注意的是其實(shí)文字內(nèi)容區(qū)域實(shí)際占據(jù)的高度并不嚴(yán)格等于字體高度而是由font-size和font-family共同決定的，特殊情況就是宋體字體下，實(shí)際內(nèi)容區(qū)域高度就等于字體高度。但是這點(diǎn)差距一般情況下也無傷大雅，我們就假定用字體高度來表示內(nèi)容區(qū)域高度即可；藍(lán)線代表基線baseline，可以理解為字母x的底邊緣線，就是比字體高度中心位置低大約1/2的x高度。

左圖的行高設(shè)置為同字體高度相同，因此紅線和綠線重合了。中圖行高設(shè)置為兩倍字體高度，行間距分為上下兩部分等分了一個(gè)字體高度，即相對于綠線分別向上向下半個(gè)字體高度。右圖行高設(shè)置為字體高度的一半，即相對于綠線分別向下向上四分之一字體高度。

從左到右分別是包含流內(nèi)in-flow內(nèi)容的inline-block元素、包含流內(nèi)in-flow內(nèi)容的inline-block元素同時(shí)設(shè)置了overflow:hidden和一個(gè)不含流內(nèi)內(nèi)容但是有高度的inline-block元素。紅線表面了inline-block元素的外邊距margin邊界，圖中盒模型黃色是border，淺綠是padding，淺藍(lán)是content；藍(lán)線表示inline-block元素的baseline。

可以得出，inline-block元素外部邊緣線就是margin-box的頂端和底端邊界，也就是圖中的紅線。基線的規(guī)則判斷比較復(fù)雜，可以簡單記為：若不包含內(nèi)容或者overflow屬性不為visible以外的值，則其基線就是底部邊緣線，也就是margin-box的底端邊界。

上圖用幾根線很清晰的表現(xiàn)出了行框的結(jié)構(gòu)。綠線代表的是行框中text box，這里稱作字框的的頂端和底端線。同時(shí)用灰色背景高亮了文字的區(qū)域。

行框頂線和其中最高的元素對齊，行框底線和其中最低元素對齊。

行框的基線在草案中并未作出精確的定義：

CSS 2.1 does not define the position of the line box"s baseline. — the W3C Specs

這可能是最讓人困惑的地方了，他的意思就是行框的基線就位于能同時(shí)滿足所有其他vertical-align和最小化行框高度的位置。這樣說還是很抽象，但是有個(gè)可以讓其具象的方法，也就是像圖中那樣在行框的最前面加上一個(gè)x字符，這個(gè)字符就是對齊了基線baseline。

圍繞著這個(gè)基線的綠線也就是字框，可以理解為行框中一個(gè)沒有任何對齊方式的內(nèi)聯(lián)元素，其高度等于字體的高度（如前面說的一樣，不考慮字體的因素了）。草案中把我們這里用字符x模擬的看不見字框稱作strut，張鑫旭大神在其博客中稱為幽靈空白節(jié)點(diǎn)。
總結(jié)下，行框就是vertial-align發(fā)揮作用的區(qū)域，他包括一個(gè)基線、字框、頂線和底線。每個(gè)內(nèi)聯(lián)元素也有其自己的基線，頂線和底線。

用上圖表示各種對齊方式的形式。

baseline： 內(nèi)聯(lián)元素的基線正好位于行框基線上。

sub：內(nèi)聯(lián)元素的基線位置低于行框的基線。

super：內(nèi)聯(lián)元素的基線位置高于行框的基線。

：內(nèi)聯(lián)元素的基線相對于行框基線移動(dòng)相應(yīng)于行高百分比的數(shù)值。

：內(nèi)聯(lián)元素的基線相對于行框基線移動(dòng)某個(gè)絕對數(shù)值。

middle：居中對齊可以著重講一下，他的意思就是內(nèi)聯(lián)元素的頂線和底線的中線與行框的基線向上偏移二分之一個(gè)x-height，可以近似理解為字符x中間交叉點(diǎn)。

text-top: 內(nèi)聯(lián)元素頂線與行框的字框頂線對齊。

text-bottom: 內(nèi)聯(lián)元素底線與行框的字框底線對齊。

top: 內(nèi)聯(lián)元素頂線與行框頂線對齊。

bottom: 內(nèi)聯(lián)元素底線與行框底線對齊。

圖片和文字對齊是前端開發(fā)者最常見的場景了，雖然現(xiàn)在很多都用字體圖標(biāo)或者用一些組件很多情況下不需要考慮對齊了，但是當(dāng)你自己寫的時(shí)候還是務(wù)必要搞清楚這個(gè)基本原理。下面看這個(gè)例子。

一個(gè)圖標(biāo)相鄰有一行文字，如果讓文字和圖標(biāo)居中對齊，大部分人會(huì)對圖標(biāo)使用vertical-align: middle，但是你會(huì)發(fā)現(xiàn)好像并未真正的居中對齊：

上圖兩邊的對比很明顯，左邊文字有些許偏上，右邊才是完美的居中對齊，兩邊的代碼如下：

Centered?



Centered!

這是為何呢？

畫出輔助線來看一下：

很明顯了，左圖的文字是默認(rèn)基線對齊的，以x的中線位置分割帶有ascender的文字會(huì)偏上一些。

而右圖對文字用span標(biāo)簽包裹然后對整個(gè)文字內(nèi)容區(qū)域也使用middle，這樣其基線位置相對于行框基線會(huì)稍微下沉一些，這樣就與圖標(biāo)居中對齊了。

前面提過，行框基線的位置會(huì)被行內(nèi)所有元素所影響，而大多對齊方式都是和行框基線有關(guān)的，因此假如行框基線發(fā)生了變化，整個(gè)布局就會(huì)出現(xiàn)變化。

舉例說明：

假如有一個(gè)很高的內(nèi)聯(lián)元素高度高于了之前行框高度時(shí)候，看看此時(shí)行框占據(jù)的空間如何變化，下圖左邊高的內(nèi)聯(lián)元素text-botttom對齊，右邊text-top對齊。可以看到行框基線和頂線，底線的位置。

我們再來思考下經(jīng)常遇到的一個(gè)場景：

內(nèi)聯(lián)元素下面總會(huì)有一個(gè)間隙，就是因?yàn)橛撵`空白節(jié)點(diǎn)在作怪，內(nèi)聯(lián)塊的基線現(xiàn)在就是底邊緣線和字框的基線對齊后，間隙就是字框基線下的descender，為避免這種問題其實(shí)就是改變行框基線的位置即可，比如top、middle都可。

以后再碰見對齊的問題，只需要搞清楚兩個(gè)問題就可以了：

行框的基線、頂線、底線在哪里？

內(nèi)聯(lián)元素的基線、頂線、底線在哪里？