上週我們頭還給我們講一些知識的過程中，提到了vertical-align，大概是跟display差不多牛批的能講好久的一個樣式吧，回來看了大神的文章，vertical-align屬性牽扯到的知識太多，本篇就只挑幾個典型或是重要的地方說一說吧。

在開始之前，希望對下面的知識有所瞭解，inline box模型，inline/inline-block/block屬性。

vertical-align一大堆亂七八糟的屬性

vertical-align指的是什麼意思呢？百度了手邊的小有道，輸入vertical，再輸入align，“哦~~~~”，我腦袋一晃，原來是“垂直的”+“對齊”的意思，就是垂直對齊嘛！

中，就是垂直對齊的意思，先放一邊，我看先看看vertical-align支援哪些屬性，F12在google瀏覽器，看看他的提示屬性又哪些：

有句俗語叫做“見多不怪”，我估摸著這些top,bottom屬性大家都見過，沒啥看頭，沒啥說頭。老實講，我看到這些養臭蟲的屬性也頭疼，所以，忘了他們，我們說點有意思的。vertical-align屬性與數值。見下面的表：

1. 首先關於數值，見下面的示例：

.test{vertical-align:-2px;}

我的理解為，元素相對於基線向下偏移兩畫素，這個常常用來修復單選框/複選框與12畫素文字大小不對齊的問題。這個沒有什麼好說的。

1. 再者關於百分數值，百分值與數值，以我的眼光看去，代表了不同的思想，以及心態。前者代表著靈活，自由與開放，後者有嚴謹，精確，安穩之意。CSS中支援百分值的屬性還不少，例如width/height,line-height,font-size,這裡的vertical-align屬性也是其一。提到百分值，必然牽扯到相對於那個屬性（或值），例如寬度百分比都是相對於父塊狀元素的寬度值的，font-size的百分值是相對於向外的第一含有font-size屬性的層的font-size大小而言的，而這裡的vertical-align，有些不拘一格，是相對於此標籤繼承的line-height值決定的。例如，如下示例程式碼：

.test{vertical-align:-10%;}

假設這裡的.test的標籤繼承的行高是20px，則這裡的vertical-align:-10%所代表的實際值是：-10% * 20 = 2(畫素)。不過事情沒有這麼簡單，所以遇到像IE6/IE7這樣吃三鹿奶粉長大的瀏覽器肯定會出點簍子的。什麼簍子呢，就是“IE6/IE7瀏覽器下的vertical-align的百分比值不支援小數line-height。”

相容性(vertical-align)

這是老外前輩整出的vertical-align相容性表，雖然我不清楚Opera瀏覽器一欄的full是個什麼意思，但是”buggy”知道，就是臭蟲成群，bug成堆的意思，我想，做過簡單研究的都會注意到不同瀏覽器下的差異確實明顯。

不過vertical-align的這些屬性值也不是一無是處，有些屬性，例如text-bottom和middle（這個一般和display：inline-block配合使用，我是這麼用的並且這個用得最多….）有時會用來修正一些樣式表現或是實現特定佈局。這個後面再說~~不過有一點知識有必要補一補就是，baseline,middle,top,bottom到底指什麼，看下面這張圖，我是找了張圖ps了好一會兒：

我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。

為什麼我的vertical-align屬性不起作用？
知道了vertical-align是垂直對齊的意思，不少經驗尚淺的同行會試著使用這個屬性實現一些垂直方向上的對齊效果，會發現有時候可以，有時候又不起作用，不知道為什麼？不急，慢慢來。

我們知道display也有很多屬性值，其中以inline/inline-block/block三個最常見，這代表了頁面上三種不同水平的元素。常常會以液態/固液混合態/固態加以形象化思考，對應於現實中的事物就是：牛奶/果凍/堅果。
我們都知道，每個人都有不同的嗜好，有的人喜歡吃甜食，有的人喜歡吃辣的東西，有的人不喜歡吃芹菜，有的人不喜歡吃羊肉等等。CSS中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。而vertical-align呢，是個比較挑食的傢伙，它只喜歡吃果凍，從小吃果凍長大，沒有了果凍，它就會鬧脾氣，對你不理不睬。我稱之為“果凍依賴型元素”，又稱之為“inline-block依賴型元素”，也就是說，只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block）水平，其身上的vertical-align屬性才會起作用。所以，類似下面的程式碼就不會起作用：

span{vertical-align:middle;}
div{vertical-align:middle;}

所謂inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以與inline水平元素混排，又能設定高寬屬性的元素。哪些元素呢，例如圖片，按鈕，單複選框，單行/多行文字框等HTML控制元件，只有這些元素預設情況下會對vertical-align屬性起作用。

雖然vertical-align屬性只會在inline-block水平的元素上期作用，但是其影響到的元素涉及到inline屬性的元素，這裡千萬記住，inline水平元素受vertical-align屬性而位置改變等不是因為其對vertical-align屬性敏感或起作用，而是受制於整個line box的變化而不得不變化的，這個後面會較為深入的分析。

vertical-align屬性是如何起作用的？

這裡，我使用vertical-align:middle屬性作為例子，講講我對vertical-align是如何起作用的理解。

CSS參考手冊上說vertical-align:middle是將當前元素放在父元素的中間，大致一讀，似乎是那麼回事，但是細細一想，不知道具體指什麼，概念模糊。我們從簡單的開始，一步一步探究生效的原理。
1. 一些簡單的例子
這裡先列舉幾個簡單的例子，方便對vertical-align:middle有了初步的直觀的認識。例子內容如下，建立一個inline-block屬性的元素，此元素的高度和寬度均為4畫素，為了對比效果明顯，我使用黑白二色，背景黑色，此4畫素*4畫素的元素為白色，vertical-align屬性依次為middle，bottom和text-bottom，當然，文字是必須的，否則何見對齊呢！整個例項的HTML程式碼都是一致的，唯一不同的就是一段vertical-align屬性，測試環境均是Firefox3.6瀏覽器，HTML程式碼如下：

<span class="box">
    <span class="dot"></span>
    我是一段卡哇伊的文字。
</span>

例項一：預設屬性（也就是baseline）

css程式碼如下：

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;}

例項二：bottom
參見如下的CSS程式碼：

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

例項三：text-bottom
參見如下的CSS程式碼：

.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

對比vertical-align:bottom和vertical-align:text-bottom，他們的表現似乎一樣，實際上呢，這裡的表現一致只是一個巧合而已，此話怎講？要顯示其差異很簡單，新增一個line-height值，您就會看到不一樣的地方了。

例項四：line-height:10px + text-align:bottom
參見如下的CSS程式碼：

.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; text-align:text-bottom;}

例項五：line-height:10px + vertical-align:text-bottom

css程式碼：

.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

可以看到，vertical-align:text-bottom屬性的那個小方點的位置沒有隨著line-height的改變而改變，還是與文字的底部對齊。如果您細看關於text-bottom以及bottom屬性的定義，您可以找到其表現的原因：text-bottom是與父標籤的文字底部對齊，在這裡也就是後面的“我是一個卡哇伊的文字”這段文字對齊，而bottom是相對於父標籤的底部對齊，而如果您熟悉line box模型且對高度的本質有所瞭解，那麼您就會明白為什麼line-height會改變標籤的bottom的位置了。這點的瞭解有助於理解下面vertical-align:middle生效的過程及原理。

例項六：middle
參見如下的CSS程式碼：

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:middle;}

2. 複雜點的例子

如果說上面的例子只是熱身的話，那麼現在就要開始進入實戰了。在這裡的例項中，我們新增一個新的元素，就是圖片，我們通過觀察不同屬性下圖片的樣式表現來理解vertical-align:middle等相關屬性是怎麼一回事，是怎樣產生頁面表現的。

為了方便大家理解，同時也是為了自己加深對vertical-align的理解，我特地做了個簡易的vertical-align屬性實驗面板，見下圖：

通過修改，行高以及對應元素的vertical-align屬性，您會在頁面上直接看到效果，同時修改文字大小的頁面表現也有助於您對inline box模型的理解。由於IE6/7對inline box的解釋不完善，同時對vertical-align的認識也是一坨香噴噴的鳥屎，所以請不要再IE6/7下使用此面板，會對您產生誤導的，IE8，Firefox，最新的Opera瀏覽器，chrome。Safari瀏覽器都是上佳的選擇。

當我們將圖片vertical-align:middle屬性改為其他的時候，例如top，或是bottom的時候，您會發現，圖片位置上移或是下移了，且居邊了，但是文字在那裡卻紋絲不動，顯然，vertical-align的本質上是個獨立的個體，與後面的line水平的元素是不存在直接的關係的。兩者沒有必然的聯絡，這是一個需要認識清楚的重要的東西。