摘要：在元素的和固定的情況下，一點小的改變也很有可能對布局造成影響。其中高度有可能是由元素的內(nèi)容決定的。行高的上下邊界是紅線。元素也有和上下邊界，元素是需要對齊的對象。因此文字的最高點超過了的高度。在第二種情況下，另外兩個元素的位置發(fā)生了下移。

開始學(xué)習(xí)前端以來，在CSS相關(guān)知識當(dāng)中困擾我最多的就是Vertical-Align這個屬性。在stackoverflow上查找相關(guān)問題的時候看到了這篇文章，于是將它翻譯出來,作為自己的一次學(xué)習(xí)筆記吧。

在遇到將元素在垂直方向上對齊的需求時，CSS提供了多種方法，有時候我用float解決，有時候我使用position:absolute解決，還有時候采用的方法是手動調(diào)整margin和padding。
其實我并不喜歡這些解決方法，float會讓元素的頂端對齊而且需要手動清楚浮動。絕對定位讓元素脫離了正常流，這樣這些元素就不會再影響到周圍的元素。在元素的padding和margin固定的情況下，一點小的改變也很有可能對布局造成影響。
接下來登場的就是本文的主角了：Vertical-align。通常來說使用這個屬性進行布局是一種hack行為，因為它本來并不是被用于這個目的。它用在文本和與文本相鄰元素的垂直方向上的對齊問題。然而，你也可以使用Vertical-align在不同的上下文中對元素進行靈活的，細粒度的排布。元素的尺寸無需知曉，元素任然處于正常流當(dāng)中，因此元素的變化會影響到周圍的元素，這使得Vertical-align是非常有價值的排布方案的選擇。

Vertical-align有時候會變的面目猙獰。它似乎有一些謎一樣的規(guī)則。舉例來說，有時候你改變了Vertical-align的值，但是該元素垂直方向上沒有發(fā)生改變反而別的元素改變了位置。
一些資料在談到Vertical-align這個問題的時候深入程度不夠，特別是當(dāng)人們想使用這個屬性布局的時候。這些資料更多的將精力集中在了一個誤區(qū)上，就是嘗試將元素內(nèi)的一切都垂直對齊。他們給出了一下在簡單情況下的例子來解釋Vertical-align這個屬性而忽略了一些復(fù)雜奇怪的方面。

Vertical-align被用于垂直對齊inline元素，也就是display值為inline和inline-block的元素。inline-table的元素不在本文的討論范圍內(nèi)。
inline元素基本上值得就是文本
inline-block元素就像它的名字一樣，同時具備inline元素和block元素的特點，這樣的元素有padding,margin,border,width,height。其中高度有可能是由元素的內(nèi)容決定的。
inline元素一個挨著一個的擺放在行內(nèi)，當(dāng)行內(nèi)元素太多的情況下，一個新行會被創(chuàng)建出來，這些行也叫做line--box。它將行內(nèi)的所有內(nèi)容都包裹了起來。根據(jù)行內(nèi)內(nèi)容的不同，line-box的尺寸也會不同，在接下來的圖里面，紅線代表了line-box的上下邊界
在這些line-box內(nèi)，Vertical-align屬性負責(zé)對齊一些獨立的元素。那么，這些元素是要和誰對齊呢？

對于垂直對齊這個知識點來說最重要的就是涉及元素的baseline。有時候元素的盒模型的上下邊界也會變的很重要。下面上圖

如圖所示有三行文字。行高的上下邊界是紅線。文字的上下邊界是綠色的線，藍色的線就是baseline了，左邊文字的高度與行高是一致的，因此綠線和紅線重合了，中間的行高是文字大小的兩倍，而在右邊，行高是文字大小的二分之一。
行內(nèi)元素的外邊緣在行高的上邊緣和下邊緣這個范圍內(nèi)對齊，如果行高小于文字的高度也無所謂。關(guān)于baseline的定義還是直接給出標準的鏈接

從左到右的三幅圖片都是inline-block元素，不同的是，左面包含著沒有脫離正常流的內(nèi)容c，中間的除了沒有脫離正常流的內(nèi)容以外還加了overflow:hidden,右面的沒有內(nèi)容但是內(nèi)容區(qū)還有高度。紅線代表了margin-box的邊界。黃色代表的是border，綠色的是padding，藍色的是content，藍色的線代表的還是baseline。
inline-block元素的外邊緣就是margin-box的邊緣。
inline-block元素的baseline的位置要看該元素有沒有處于正常流之內(nèi)的內(nèi)容。
(1)在有處于正常流內(nèi)容的情況下，inline-block元素的baseline就是最后一個作為內(nèi)容存在的元素的baseline，這個元素的baseline的確定就要根據(jù)他自身來確定了。
(2)在overflow屬性不為visible的情況下，baseline就是margin-box的下邊界了。
(3)第三種情況下baseline還是margin-box的下邊界。

關(guān)于line-box的圖上面已經(jīng)給過了，這次我將文字部分高亮顯示。line-box的上邊界與最高元素的上邊界對齊，下邊界與最低元素的下邊界對齊。
W3C標準中并沒有定義line-box的baseline的位置。這一點很讓人困惑，baseline的位置需要滿足vertical-align屬性的值以及讓line-box的高度最小等條件，是一個很靈活的參數(shù)。
line-box的baseline是不可見的，但是可以很輕松的將它可視化出來，在行的開頭添加一個字母，比如"x"，這個字母的下邊界默認就是baseline的位置。圍繞著baseline在line-box中形成了文字盒。文字盒可以被認為是沒有和任何元素對齊的line-box中的inline元素，它的告訴與它的父元素的font-size的值相同。因此，文字盒僅僅包含非格式化的line-box的文本，文字盒的邊界由綠線來表示。因為文字盒是緊挨著baseline的，所以baseline的位置發(fā)生變化的話，文字盒的位置也會跟著改變(這里所說的文字盒在標準中被叫做strut)。
總結(jié)起來的話有以下兩點：

有一個區(qū)域叫做line-box，垂直方向上的對齊都是發(fā)生在這個區(qū)域里面，它有baseline，有文字盒，有上下邊界。

inline元素也有baseline和上下邊界，inline元素是需要對齊的對象。

有關(guān)Vertical-align各個取值的說明讀者還是上MDN看吧。也可以看看天鑲大神的博客上的文章

我想將一個icon與文字對齊僅僅使icon的vertical-align屬性的值設(shè)置為middle似乎不能產(chǎn)生令人滿意的結(jié)果，例子如下圖

Centered?



Centered!

下面給出上圖的輔助線版本

原因就是左面的文字根本就沒有發(fā)生對齊行為，它還是對齊于line-box的baseline。而vertical-align對齊的點是baseline加上半個x的距離(half of the x-height)。因此文字的最高點超過了icon的高度。
而右面的例子，文字與icon都對齊于一個中點，文字的baseline稍微下移，位于line-box的baseline的下方。結(jié)果是很好的達到了icon與文字對齊的效果。

這是一個Vertical-align的坑，line-box中的所有元素都會影響到baseline的位置。假設(shè)，一個元素按某種方式垂直對齊了，但是這種對齊方式會引起baseline的移動，又因為大部分的垂直對齊方式(除了top和bottom)和baseline有關(guān)，因此這個元素的垂直方向?qū)R的行為會引起該line-box內(nèi)其他元素位置的調(diào)整。
下面還是一些例子

一個很高的元素，其高度占滿了整個line-box，那么vertical-align對其實沒有影響的，在它的top和bottom之外沒有空間讓其移動。但是為了滿足它的vertical-align的值，line-box的baseline會發(fā)生移動，左面的高元素的取值為text-bottom，矮元素的取值為baseline。右面的高元素的取值為text-top，你會看到baseline跳上去了

如果把高元素的vertical-align設(shè)置為其他值，也能看到類似的行為
甚至將vertical-align設(shè)置為bottom或者是top也會讓baseline發(fā)生移動。這很奇怪，因為這時候應(yīng)該就沒baseline什么事兒了。

將兩個更大的元素放在一個line里面，并且設(shè)置vertical-align的值讓line-box的baseline移動。在滿足vertical-align數(shù)值對齊的條件下，line-box的高度會自我調(diào)整，如左面的圖。再增加第三個元素，第三個元素如果因為其vertical-align的設(shè)置不會超過line-box的邊緣的話，它是不會影響到line-box的高度和baseline的位置的，如果它會超過line-box的邊緣，那么line-box的高度和baseline的位置也會進行調(diào)整。在第二種情況下，另外兩個元素的位置發(fā)生了下移。

下面給出一個例子，如果嘗試將li元素在垂直方向上進行對齊的話在，這個現(xiàn)象非常常見。

正如你所見，li元素是對齊baseline的，baseline的下方會給字母的一部分留出空間，因此會產(chǎn)生一個空隙。解決方案就是改變line-box的baseline的位置，比如將這些li這是為vertical-align:middle

inline元素之間的空隙造成布局效果與理想狀態(tài)發(fā)生偏差
這主要是因為inline元素本身的原因，但是因為如果要讓vertical-align的值產(chǎn)生作用的話，inline元素是必備要求，因此了解一點也不錯嘛
這個空隙來源于inline元素之間的空格，所有的inline元素之間的空白都會變成一個空格。如果你想讓inline元素在水平上緊挨著，設(shè)置它們的寬度是不行的。因為之間存在空隙，所以行的寬度不夠放下兩個inline元素。一行會被破壞為兩行。解決方案如下圖的右側(cè)

50% wide




50% wide... and in next line





50% wide



50% wide

兩個建議，如果vertical-align屬性不起作用，那么問問自己：

line-box的上下邊緣以及baseline的位置在哪里？

inline元素的上下邊緣以及baseline的位置在哪里？