摘要：而行內(nèi)塊元素，顧名思義，就是位于行內(nèi)的塊元素。紅線表示行高的頂邊和底邊，綠線表示字體高度，藍(lán)線表示基線。紅線表示外邊距的邊界，黃色是邊框，綠色的內(nèi)邊距，藍(lán)色是內(nèi)容區(qū)，藍(lán)線是每個行內(nèi)塊元素的基線?，F(xiàn)在，我們已經(jīng)知道了對齊相關(guān)的一切要素。

好，我們聊聊vertical-align。這個屬性主要目的用于將相鄰的文本與元素對齊。而實(shí)際上，verticle-algin可以在不同上下文中靈活地對齊元素，以及進(jìn)行細(xì)粒度的控制，不必知道元素的大小。元素仍然在文檔流中，因而其他元素可以根據(jù)它們大小的變化進(jìn)行相應(yīng)的調(diào)整。一個有用的例子就是居中圖標(biāo)與旁邊的文本。

可是，vertical-align有時候也很難搞，經(jīng)常導(dǎo)致困惑。好像有什么神秘的規(guī)則在起作用。比如，我們改變了某個元素的vertical-align而它的對齊方式卻并未改變，反倒是同一行的其他元素的對齊方式變了！我時不時地仍然會掉到vertical-align的坑里，絕望無助。

遺憾的是，關(guān)于這方面的資料大都講得很膚淺。尤其是針對布局的情況。很多文章概念錯亂，試圖把元素中的一切都垂直對齊。它們介紹了這個屬性的基本概念，解釋了簡單情況下元素的對齊，卻沒涉及真正棘手的部分。

因此，我給自己設(shè)定了一個目標(biāo)：徹底摸清vertical-align的行為。然后我就死啃W3C的CSS規(guī)范，同時也嘗試了一些例子。最終寫出了這篇文章。

好，下面我們就開始吧。

vertical-align用于對齊行內(nèi)元素。所謂行內(nèi)元素，即display屬性值為下列之一的元素：

inline

inline-block

inline-table （本文未涉及）

其中，行內(nèi)元素（inline element）就是包含文本的標(biāo)簽。

而行內(nèi)塊元素（inline-block element），顧名思義，就是位于行內(nèi)的塊元素?？梢杂袑挾群透叨龋梢杂善鋬?nèi)容決定），也可以有內(nèi)邊距、邊框和外邊距。

行內(nèi)級元素會相互挨著排成行。如果一行排不下，就會在下方再建一行。所有行都會創(chuàng)建所謂的行盒子，行盒子裝著自己行中的所有內(nèi)容。內(nèi)容的高度不同，行盒子的高度也不同。在下面的示意圖中，行盒子的頂部和底部用紅色點(diǎn)線表示。

這些行盒子限定了我們可以影響的范圍。在行盒子內(nèi)部，可以通過vertical-align來對齊個別元素。那么，相對于什么來對齊元素呢？

垂直對齊最重要的參考點(diǎn)，就是相關(guān)元素基線。某些情況下，行盒子的上下外邊界也會成為參考點(diǎn)。下面我們就來看一看相關(guān)元素類型的基線和外邊界。

這里有三行文本緊挨著。紅線表示行高的頂邊和底邊，綠線表示字體高度，藍(lán)線表示基線。左邊這一行，行高與字體高度相同，因此上下方的紅色和綠線重疊在了一起。中間一行，行高是font-size的兩倍。右邊一行，行高為font-size的一半。

行內(nèi)元素的外邊界與自己行高的上、下邊對齊。行高比font-size小不小并不重要。因此上圖中紅線同時也就表示外邊界。

行內(nèi)元素的基線是字符恰好位于其上的那條線，也就是圖中的藍(lán)線。大致來說，基線總是穿過字體高度一半以下的某一點(diǎn)?？梢詤⒖糤3C規(guī)范中詳細(xì)的定義。

從左到右：包含流內(nèi)內(nèi)容（“c”）的行內(nèi)塊、包含流內(nèi)內(nèi)容且設(shè)置了溢出（overflow: hidden）的行內(nèi)塊和未包含流內(nèi)內(nèi)容（但內(nèi)容區(qū)有高度）的行內(nèi)塊。紅線表示外邊距的邊界，黃色是邊框，綠色的內(nèi)邊距，藍(lán)色是內(nèi)容區(qū)，藍(lán)線是每個行內(nèi)塊元素的基線。

行內(nèi)塊元素的外邊界即其外邊距盒子的上、下兩邊，也就是圖中的紅線。

行內(nèi)塊元素的基線取決于元素是否包含流內(nèi)內(nèi)容：

有流內(nèi)內(nèi)容的行內(nèi)塊元素，基線就是正常流中最后內(nèi)容元素的基線（左）。這個最后元素的基線是按照它自己的規(guī)則找到的。

有流內(nèi)內(nèi)容但overflow屬性值不是visible的行內(nèi)塊元素，基線就是外邊距盒子的底邊（中）。也就是與行內(nèi)塊元素的下外邊界重合。

沒有流內(nèi)內(nèi)容的行內(nèi)塊元素，基線同樣是外邊距盒子的底邊（右）。

這張圖前面出現(xiàn)過。但這次我們畫出了行盒子的文本盒子的上、下邊（綠色，下面詳細(xì)介紹）還有基線（藍(lán)色）。同時，還用灰色背景表示了文本元素的區(qū)域。

行盒子的頂邊與該行中最頂部元素的頂邊重合，底邊與該行中最底部元素的底邊重合。因此圖中的紅線表示的就是行盒子。

行盒子的基線是個變量：
CSS 2.1沒有定義行盒子的基線。

在使用vertical-align時這一塊應(yīng)該是最令人困惑的了。也就是說，基線畫在哪里需要滿足很多條件，比如要符合vertical-align指定的條件，同時還要保證行盒子高度最小。這是個自由變量。

因?yàn)樾泻凶拥幕€并不可見，所以有時候不容易確定它的位置。但實(shí)際上有個簡單的辦法可以令其可見。只要在相關(guān)行的開頭加上一個字母，比如上圖中開頭的“x”即可。如果這個字母沒有被設(shè)置對齊，那么它默認(rèn)就位于基線之上。

圍繞基線的是行盒子中的文本盒子?？梢院唵蔚匕盐谋竞凶涌闯尚泻凶觾?nèi)部未經(jīng)對齊的行內(nèi)元素。文本盒子的高度等于其父元素的font-size。因此，文本盒子只是用來盛放未經(jīng)格式化的文本的。上圖中的綠線表示的就是文本盒子。由于文本盒子與基線關(guān)聯(lián)，所以基線移動它也會跟著移動。（W3C規(guī)范里稱這個文本盒子為strut。）

終于把最難的部分講完了?，F(xiàn)在，我們已經(jīng)知道了對齊相關(guān)的一切要素。下面簡單總結(jié)一下最重要的兩點(diǎn)。

有一個區(qū)域叫行盒子。行盒子中的內(nèi)容可以垂直對齊。行盒子有基線、文本盒子，還有上邊和下邊。

還有行內(nèi)元素，也就是可以被對齊的對象。行內(nèi)元素有基線，以及上邊和下邊。

使用vertical-align，前面提到的參考點(diǎn)就會按照某種關(guān)系被設(shè)置好。

對齊行內(nèi)元素的基線和行盒子的基線

baseline：元素基線與行盒子基線重合。

sub：元素基線移動至行盒子基線下方。

super：元素基線移動至行盒子基線上方。

<百分比值>：元素基線相對于行盒子基線向上或向下移動，移動距離等于line-height的百分比。

<長度值>：元素基線相對于行盒子基線向上或向下移動指定的距離。

相對于行盒子的基線對齊元素的外邊界

middle：元素上、下邊的中點(diǎn)與行盒子基線加上x-height的一半對齊。

相對于行盒子的文本盒子對齊元素的外邊界

還有兩種情況是相對于行盒子的基線對齊，因?yàn)槲谋竞凶拥奈恢糜尚泻凶拥幕€決定。

text-top：元素的頂邊與行盒子的文本盒子的頂邊對齊。

text-bottom：元素的底邊與行盒子的文本盒子的底邊對齊。

相對于行盒子的外邊界對齊元素的外邊界

top：元素的頂邊與行盒子的頂邊對齊。

bottom：元素的底邊與行盒子的底邊對齊。

下面我們看看在某些情況下的垂直對齊。特別是一些容易出錯的情況。

有一個問題一直困擾著我。有一個圖標(biāo)，我想讓它與一行文本垂直居中。如果只應(yīng)用vertical-align: middle好像不行，比如這個例子：

Centered?



Centered!

還是同一個例子，只不過這次多了一些輔助線：

這次可以看清問題所在了。因?yàn)樽髠?cè)的情況是文本沒對齊，而是仍然位于基線之上。應(yīng)用vertical-align: middle，實(shí)際上會導(dǎo)致圖標(biāo)中心與不出頭小寫字母的中心（x-height的一半）對齊，所以出頭的字母會在上方突出出來。

右側(cè)，仍然是對齊整個字體區(qū)的垂直中點(diǎn)。結(jié)果文本基線稍稍向下移動了一點(diǎn)，于是就實(shí)現(xiàn)了文本與圖標(biāo)完美對齊。

這是使用vertical-align時一個常見的坑：行盒子基線的位置會受到其中所有元素的影響。假設(shè)一個元素采用的對齊方式會導(dǎo)致行盒子移動。由于大多數(shù)垂直對齊（除top和bottom外），都相對于基線計算，因此這會導(dǎo)致該行所有其他元素重新調(diào)整位置。

下面是幾個例子。

如果行內(nèi)有一個很高的元素，這個元素上方和下方都沒有空間了，此時要與行盒子的基線對齊，就必須讓它移動。矮盒子是vertical-align:baseline。左側(cè)的高盒子是vertical-align: text-bottom，而右側(cè)的高盒子是vertical-algin:text-top。可以看到，基線帶著矮盒子移動到了上方。

在通過vertical-align的其他值對齊一個較高的元素時，也會出現(xiàn)同樣的現(xiàn)象。

即使設(shè)置vertical-align為bottom（左）和top（右），也會導(dǎo)致基線移動。這就很奇怪了，因?yàn)榇藭r根本不關(guān)基線什么事。

把兩個較大的元素放在一行并垂直對齊它們，基線也會移動以匹配兩種對齊。然后，行的高度會調(diào)整（左）。再增加一個元素，但該元素對齊方式?jīng)Q定了它不會超出行盒子的邊界，所以行盒子不會調(diào)整（中）。如果新增的元素會超出行盒子的邊界，那么行盒子的高度和基線就會再次調(diào)整。在這例子中，前兩個盒子向下移動了（右）。

看看這個例子：對列表元素的li應(yīng)用vertical-align。

我們看到，列表項(xiàng)位于基線上?；€下面有一個小間隙，用于文本的下伸部分。怎么辦？只要把基線向上移開一點(diǎn)就行了，比如用vertical-align: middle：

有文本內(nèi)容的行內(nèi)塊不會出現(xiàn)這種情況，因?yàn)閮?nèi)容已經(jīng)把基線向上移了。

這主要是行內(nèi)元素本身的問題。由于vertical-align必然會遇到行內(nèi)元素，所以有必要了解一下。

在前面列表項(xiàng)的例子中也可以看到這個間隙。這個間隙來自你的標(biāo)記中行內(nèi)元素間的空白。行內(nèi)元素間的所有空白會折疊為一個。如果我們要通過width: 50%實(shí)現(xiàn)并排放兩個行內(nèi)元素，那這個空白就會成為障礙。因?yàn)橐恍蟹挪幌聝蓚€50%再加一個空白，結(jié)果就會折行（左）。要刪除這個間隙，需要在HTML中通過注釋刪除空白（右）。

50% wide
50% wide... and in next line


   
50% wide
50% wide

好了，就這些。一旦了解了規(guī)則，就沒有那么復(fù)雜了。如果vertical-align沒有達(dá)到效果，只要問下面的問題就能找到癥結(jié)所在：

行盒子的基線和上、下邊界在哪兒？

行內(nèi)元素的基線和上、下邊界在哪兒？

據(jù)此就可以找到問題的解決方案。