一、關(guān)于今天，本文，及其他

上個(gè)月21號(hào)，有位同行留言想讓我講講vertical-align屬性，我其實(shí)對(duì)vertical-align屬性也是略知皮毛，要說豈敢談“講解”，就說說我對(duì)vertical-align屬性的一些理解吧，純屬個(gè)人見解，若有不準(zhǔn)確之處還望見諒。還有，vertical-align屬性牽扯到的知識(shí)實(shí)在是太多了，不是一篇文章就可以講清楚的，這里我就只挑幾個(gè)典型或是重要的地方說一說。

在開始之前，希望對(duì)下面的知識(shí)有所了解，inline box模型，inline/inline-block/block屬性。//zxx:關(guān)于inline box模型，我在“浮動(dòng)的”部分做了專門的介紹。

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

vertical-align指的是什么意思呢？我window+D清屏，雙擊打開有道桌面詞典，輸入vertical，再輸入align，“哦~~~~”，我腦袋一晃，原來是“垂直的”+“對(duì)齊”的意思，就是垂直對(duì)齊嘛！

中，就是垂直對(duì)齊的意思，先放一邊，我看先看看vertical-align支持哪些屬性，我比較喜歡輕巧的Dreamweaver，看看他的提示屬性又哪些：

有句俗語叫做“見多不怪”，我估摸著這些top,bottom屬性大家都見過，沒啥看頭，沒啥說頭。老實(shí)講，我看到這些屬性也頭疼，所以，忘了他們，我們說點(diǎn)有意思的。

vertical-align屬性與數(shù)值。見下面的表：

1. 首先關(guān)于數(shù)值，見下面的示例：

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

我的理解為，元素相對(duì)于基線向下偏移兩像素，這個(gè)常常用來修復(fù)單選框/復(fù)選框與12像素文字大小不對(duì)齊的問題。這個(gè)沒有什么好說的。

2. 再者關(guān)于百分?jǐn)?shù)值，百分值與數(shù)值，以我的眼光看去，代表了不同的思想，以及心態(tài)。前者代表著靈活，自由與開放，后者有嚴(yán)謹(jǐn)，精確，安穩(wěn)之意。CSS中支持百分值的屬性還不少，例如width/height,line-height,font-size,這里的vertical-align屬性也是其一。提到百分值，必然牽扯到相對(duì)于那個(gè)屬性（或值），例如寬度百分比都是相對(duì)于父塊狀元素的寬度值的，font-size的百分值是相對(duì)于向外的第一含有font-size屬性的層的font-size大小而言的，而這里的vertical-align，有些不拘一格，是相對(duì)于此標(biāo)簽繼承的line-height值決定的。例如，如下示例代碼：

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

假設(shè)這里的.test的標(biāo)簽繼承的行高是20px，則這里的vertical-align:-10%所代表的實(shí)際值是：-10% * 20 = 2(像素)。不過事情沒有這么簡單，CSS中的line-height是個(gè)非常精深的屬性，建議您看看我之前寫的這篇文章：css行高line-height的一些深入理解及應(yīng)用，所以遇到像IE6/IE7這樣的瀏覽器肯定會(huì)出點(diǎn)簍子的。什么簍子呢，就是“IE6/IE7瀏覽器下的vertical-align的百分比值不支持小數(shù)line-height。”您可以看看我處理的以小數(shù)值line-height繼承的vertical-align百分比顯示對(duì)比圖[參展對(duì)象：IE6(觀眾扔雞蛋)和Firefox3.6(美女送鮮花)]：

如果您現(xiàn)在使用的就是IE6或是IE7或是IE6/7內(nèi)核的瀏覽器，同時(shí)相對(duì)這個(gè)bug有所見識(shí)

3. 最后關(guān)于其他屬性，像是bottom，middle等，我是懶得說什么了，為何？可以看看下面這張兼容性表：

兼容性(vertical-align)

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

不過vertical-align的這些屬性值也不是一無是處，有些屬性，例如text-bottom和middle有時(shí)會(huì)用來修正一些樣式表現(xiàn)或是實(shí)現(xiàn)特定布局。這個(gè)后面再說~~不過有一點(diǎn)知識(shí)有必要補(bǔ)一補(bǔ)就是，baseline,middle,top,bottom到底指什么，看下面這張圖，我是找了張圖ps了好一會(huì)兒：

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

三、為什么我的vertical-align屬性不起作用？

知道了vertical-align是垂直對(duì)齊的意思，不少經(jīng)驗(yàn)尚淺的同行會(huì)試著使用這個(gè)屬性實(shí)現(xiàn)一些垂直方向上的對(duì)齊效果，會(huì)發(fā)現(xiàn)有時(shí)候可以，有時(shí)候又不起作用，不知道為什么？不急，慢慢來。

我們知道display也有很多屬性值，其中以inline/inline-block/block三個(gè)最常見，這代表了頁面上三種不同水平的元素。我常常會(huì)以液態(tài)/固液混合態(tài)/固態(tài)加以形象化思考，對(duì)應(yīng)于現(xiàn)實(shí)中的事物就是：牛奶/果凍/堅(jiān)果。

我們都知道，每個(gè)人都有不同的嗜好，有的人喜歡吃甜食，有的人喜歡吃辣的東西，有的人不喜歡吃芹菜，有的人不喜歡吃羊肉等等。CSS中的有些元素也是這樣，他們有的只對(duì)牛奶感興趣，有的只喜歡吃堅(jiān)果和果凍，而討厭牛奶。而vertical-align呢，是個(gè)比較挑食的家伙，它只喜歡吃果凍，從小吃果凍長大，沒有了果凍，它就會(huì)鬧脾氣，對(duì)你不理不睬。我稱之為“果凍依賴型元素”，又稱之為“inline-block依賴型元素”，也就是說，只有一個(gè)元素屬于inline-block（table-cell也可以理解為inline-block水平）水平，只有一個(gè)元素屬于inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會(huì)起作用。所以，類似下面的代碼就不會(huì)起作用：

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

所謂inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以與inline水平元素混排，又能設(shè)置高寬屬性的元素。哪些元素呢，例如圖片，按鈕，單復(fù)選框，單行/多行文本框等HTML控件，只有這些元素默認(rèn)情況下會(huì)對(duì)vertical-align屬性起作用。

雖然vertical-align屬性只會(huì)在inline-block水平的元素上期作用，但是其影響到的元素涉及到inline屬性的元素，這里千萬記住，inline水平元素受vertical-align屬性而位置改變等不是因?yàn)槠鋵?duì)vertical-align屬性敏感或起作用，而是受制于整個(gè)line box的變化而不得不變化的，這個(gè)后面會(huì)較為深入的分析。

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

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

CSS參考手冊(cè)上說vertical-align:middle是將當(dāng)前元素放在父元素的中間，大致一讀，似乎是那么回事，但是細(xì)細(xì)一想，不知道具體指什么，概念模糊。我們從簡單的開始，一步一步探究生效的原理。

1. 一些簡單的例子

這里先列舉幾個(gè)簡單的例子，方便對(duì)vertical-align:middle有了初步的直觀的認(rèn)識(shí)。例子內(nèi)容如下，創(chuàng)建一個(gè)inline-block屬性的元素，此元素的高度和寬度均為4像素，為了對(duì)比效果明顯，我使用黑白二色，背景黑色，此4像素*4像素的元素為白色，vertical-align屬性依次為middle，bottom和text-bottom，當(dāng)然，文字是必須的，否則何見對(duì)齊呢！整個(gè)實(shí)例的HTML代碼都是一致的，唯一不同的就是一段vertical-align屬性，測試環(huán)境均是Firefox3.6瀏覽器，HTML代碼如下：

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

實(shí)例一：默認(rèn)屬性（也就是baseline）

參見如下的CSS代碼：

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

結(jié)果如下圖：

實(shí)例二：bottom

參見如下的CSS代碼：

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

結(jié)果如下圖：

實(shí)例三：text-bottom

參見如下的CSS代碼：

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

結(jié)果如下圖：

對(duì)比vertical-align:bottom和vertical-align:text-bottom，他們的表現(xiàn)似乎一樣，實(shí)際上呢，這里的表現(xiàn)一致只是一個(gè)巧合而已，此話怎講？要顯示其差異很簡單，添加一個(gè)line-height值，您就會(huì)看到不一樣的地方了。

實(shí)例四：line-height:10px + vertical-align: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;}

結(jié)果如下截圖：

而如果vertical-align的屬性是text-bottom呢？

實(shí)例五：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;}

結(jié)果如下圖：

可以看到，vertical-align:text-bottom屬性的那個(gè)小方點(diǎn)的位置沒有隨著line-height的改變而改變，還是與文字的底部對(duì)齊。如果您細(xì)看關(guān)于text-bottom以及bottom屬性的定義，您可以找到其表現(xiàn)的原因：text-bottom是與父標(biāo)簽的文字底部對(duì)齊，在這里也就是后面的“我是一個(gè)卡哇伊的文字”這段文字對(duì)齊，而bottom是相對(duì)于父標(biāo)簽的底部對(duì)齊，而如果您熟悉line box模型且對(duì)高度的本質(zhì)有所了解，那么您就會(huì)明白為什么line-height會(huì)改變標(biāo)簽的bottom的位置了。這點(diǎn)的了解有助于理解下面vertical-align:middle生效的過程及原理。

實(shí)例六：middle

參見如下的CSS代碼：

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

結(jié)果如下圖所示：

2. 復(fù)雜點(diǎn)的例子

如果說上面的例子只是熱身的話，那么現(xiàn)在就要開始進(jìn)入實(shí)戰(zhàn)了。在這里的實(shí)例中，我們添加一個(gè)新的元素，就是圖片，我們通過觀察不同屬性下圖片的樣式表現(xiàn)來理解vertical-align:middle等相關(guān)屬性是怎么一回事，是怎樣產(chǎn)生頁面表現(xiàn)的。

為了方便大家理解，同時(shí)也是為了自己加深對(duì)vertical-align的理解，我特地做了個(gè)簡易的vertical-align屬性實(shí)驗(yàn)面板，見下圖：

通過修改，行高以及對(duì)應(yīng)元素的vertical-align屬性，您會(huì)在頁面上直接看到效果，同時(shí)修改文字大小的頁面表現(xiàn)也有助于您對(duì)inline box模型的理解。由于IE6/7對(duì)inline box的解釋不完善，同時(shí)對(duì)vertical-align的認(rèn)識(shí)也是一坨香噴噴的鳥屎，所以請(qǐng)不要再IE6/7下使用此面板，會(huì)對(duì)您產(chǎn)生誤導(dǎo)的，IE8，F(xiàn)irefox，最新的Opera瀏覽器，chrome。Safari瀏覽器都是上佳的選擇。關(guān)于IE6/7的解釋問題會(huì)在下集介紹。

這里說點(diǎn)我的認(rèn)識(shí)吧：vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通常看到的與后面的文字垂直居中顯示那都是假象！這就是我的認(rèn)識(shí)，當(dāng)然，我也可以為我的理解提供強(qiáng)有力的證據(jù)，我們來看vertical-align屬性實(shí)驗(yàn)面板。

當(dāng)我們將圖片vertical-align:middle屬性改為其他的時(shí)候，例如top，或是bottom的時(shí)候，您會(huì)發(fā)現(xiàn)，圖片位置上移或是下移了，且居邊了，但是文字在那里卻紋絲不動(dòng)，顯然，vertical-align的本質(zhì)上是個(gè)獨(dú)立的個(gè)體，與后面的line水平的元素是不存在直接的關(guān)系的。兩者沒有必然的聯(lián)系，這是一個(gè)需要認(rèn)識(shí)清楚的重要的東西。

您也可以查看下面一段錄制的視頻，在Firefox3.6瀏覽器下錄制，觀察表現(xiàn)效果：

最新評(píng)論