轉(zhuǎn)載聲明：此文章為轉(zhuǎn)載（），點擊查看原文夺巩。如有侵權(quán)24小時內(nèi)刪除。聯(lián)系QQ：1522025433

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

今天是個特殊的日子续镇，因為今天是汶川地震兩周年的日子美澳，我很悲鳴；今天又是國際護士節(jié)摸航，看到微博上護士照橫流制跟，我很欣慰。
一段放松的YY后酱虎，進入正題雨膨。上個月21號，有位同行留言想讓我講講vertical-align屬性读串，我其實對vertical-align屬性也是略知皮毛聊记，要說豈敢談“講解”，就說說我對vertical-align屬性的一些理解吧恢暖，純屬個人見解排监，若有不準確之處還望見諒。還有杰捂，vertical-align屬性牽扯到的知識實在是太多了社露，不是一篇文章就可以講清楚的，這里我就只挑幾個典型或是重要的地方說一說琼娘。
在開始之前峭弟，希望對下面的知識有所了解附鸽，inline box模型，inline/inline-block/block屬性瞒瘸。//zxx:關(guān)于inline box模型坷备，我在這篇文章的“浮動的’破壞性’”部分做了專門的介紹。

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

vertical-align指的是什么意思呢省撑？我window+D清屏，雙擊打開有道桌面詞典俯在，輸入vertical竟秫，再輸入align，“哦~~~~”跷乐，我腦袋一晃肥败，原來是“垂直的”+“對齊”的意思，就是垂直對齊嘛愕提！

中馒稍，就是垂直對齊的意思，先放一邊浅侨，我看先看看vertical-align支持哪些屬性纽谒，我比較喜歡輕巧的Dreamweaver，看看他的提示屬性又哪些：

有句俗語叫做“見多不怪”如输，我估摸著這些top,bottom屬性大家都見過鼓黔，沒啥看頭，沒啥說頭不见。老實講澳化，我看到這些養(yǎng)臭蟲的屬性也頭疼，所以脖祈，忘了他們肆捕，我們說點有意思的刷晋。vertical-align屬性與數(shù)值盖高。見下面的表：

1. 首先關(guān)于數(shù)值，見下面的示例：
   .test{vertical-align:-2px;}
   我的理解為眼虱，元素相對于基線向下偏移兩像素喻奥，這個常常用來修復(fù)單選框/復(fù)選框與12像素文字大小不對齊的問題。這個沒有什么好說的捏悬。

2. 再者關(guān)于百分數(shù)值撞蚕，百分值與數(shù)值，以我的眼光看去过牙，代表了不同的思想甥厦，以及心態(tài)纺铭。前者代表著靈活，自由與開放刀疙，后者有嚴謹舶赔，精確，安穩(wěn)之意谦秧。CSS中支持百分值的屬性還不少竟纳，例如width/height,line-height,font-size,這里的vertical-align屬性也是其一。提到百分值疚鲤，必然牽扯到相對于那個屬性（或值）锥累，例如寬度百分比都是相對于父塊狀元素的寬度值的，font-size的百分值是相對于向外的第一含有font-size屬性的層的font-size大小而言的集歇，而這里的vertical-align桶略，有些不拘一格，是相對于此標簽繼承的line-height值決定的鬼悠。例如删性，如下示例代碼：
   .test{vertical-align:-10%;}

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

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

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

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

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

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

知道了vertical-align是垂直對齊的意思糯钙，不少經(jīng)驗尚淺的同行會試著使用這個屬性實現(xiàn)一些垂直方向上的對齊效果，會發(fā)現(xiàn)有時候可以退腥，有時候又不起作用任岸，不知道為什么？不急狡刘，慢慢來享潜。

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

我們都知道艺蝴，每個人都有不同的嗜好，有的人喜歡吃甜食鸟废，有的人喜歡吃辣的東西猜敢，有的人不喜歡吃芹菜，有的人不喜歡吃羊肉等等盒延。CSS中的有些元素也是這樣缩擂，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍兰英，而討厭牛奶撇叁。而vertical-align呢供鸠，是個比較挑食的家伙畦贸，它只喜歡吃果凍，從小吃果凍長大，沒有了果凍薄坏，它就會鬧脾氣趋厉，對你不理不睬。我稱之為“果凍依賴型元素”胶坠，又稱之為“inline-block依賴型元素”君账，也就是說，只有一個元素屬于inline-block（table-cell也可以理解為inline-block水平）水平沈善，只有一個元素屬于inline或是inline-block（table-cell也可以理解為inline-block水平）水平乡数，其身上的vertical-align屬性才會起作用。所以闻牡，類似下面的代碼就不會起作用：
span{vertical-align:middle;}
div{vertical-align:middle;}
所謂inline-block水平的元素净赴，就是既可以“吸”又可以“咬”的元素，既可以與inline水平元素混排罩润，又能設(shè)置高寬屬性的元素玖翅。哪些元素呢，例如圖片割以，按鈕金度，單復(fù)選框，單行/多行文本框等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有了初步的直觀的認識洞慎。例子內(nèi)容如下痛单，創(chuàng)建一個inline-block屬性的元素，此元素的高度和寬度均為4像素劲腿，為了對比效果明顯旭绒，我使用黑白二色，背景黑色焦人，此4像素*4像素的元素為白色挥吵，vertical-align屬性依次為middle，bottom和text-bottom花椭，當然蔫劣，文字是必須的，否則何見對齊呢个从！整個實例的HTML代碼都是一致的脉幢，唯一不同的就是一段vertical-align屬性，測試環(huán)境均是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;}

結(jié)果如下圖：

實例二：bottom
參見如下的CSS代碼：

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

結(jié)果如下圖：

實例三：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é)果如下圖：

對比vertical-align:bottom和vertical-align:text-bottom，他們的表現(xiàn)似乎一樣奕污，實際上呢萎羔，這里的表現(xiàn)一致只是一個巧合而已，此話怎講碳默？要顯示其差異很簡單贾陷，添加一個line-height值，您就會看到不一樣的地方了嘱根。

實例四：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呢髓废？

實例五：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的改變而改變该抒，還是與文字的底部對齊慌洪。如果您細看關(guān)于text-bottom以及bottom屬性的定義，您可以找到其表現(xiàn)的原因：text-bottom是與父標簽的文字底部對齊凑保，在這里也就是后面的“我是一個卡哇伊的文字”這段文字對齊冈爹，而bottom是相對于父標簽的底部對齊，而如果您熟悉line box模型且對高度的本質(zhì)有所了解欧引，那么您就會明白為什么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;}

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

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

如果說上面的例子只是熱身的話芝此，那么現(xiàn)在就要開始進入實戰(zhàn)了憋肖。在這里的實例中因痛，我們添加一個新的元素，就是圖片瞬哼，我們通過觀察不同屬性下圖片的樣式表現(xiàn)來理解vertical-align:middle等相關(guān)屬性是怎么一回事，是怎樣產(chǎn)生頁面表現(xiàn)的租副。
為了方便大家理解坐慰，同時也是為了自己加深對vertical-align的理解，我特地做了個簡易的vertical-align屬性實驗面板用僧，見下圖：

五访锻、下集預(yù)告

下集看點：
解析vertical-align一般的行為表現(xiàn)
vertical-align相關(guān)對齊問題分析及解決
浮動為何可以破壞vertical-align屬性

未完，待續(xù)……