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

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

1.1 首先關于數值

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

1.2 再者關于百分數值

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

假設這里的.test的標簽繼承的行高是20px，則這里的vertical-align:-10%所代表的實際值是：-10% * 20 = 2(像素)

1.3 最后關于其他屬性，像是bottom，middle等

2. 為什么我的vertical-align屬性不起作用？

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

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

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

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

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

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

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

★ 一些簡單的例子

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

3.1 默認屬性（也就是baseline）

3.2 bottom

這里將要對齊的元素(小方塊)的底端和line boxes(span元素的內容所組成的)的底端對齊

3.3 text-bottom

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

3.4 line-height:10px + vertical-align:bottom

設置行高line-height后，小方塊在具備行高的條件下也要保持和父容器的底部對齊，所以小方塊被上移

3.5 line-height:10px + vertical-align:text-bottom

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

3.6 middle

因為middle是所要對齊的小方塊的中垂點和父元素的底部基線向上移動1/2個字母X的位置所對齊

★ 一些復雜的例子

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

我們發現修改圖片vertical-align:middle屬性為其他的屬性的時候，例如top，或是bottom的時候，您會發現，圖片位置上移或是下移了，但是文字在那里卻紋絲不動，顯然，vertical-align的本質上是個獨立的個體，與后面的line水平的元素是不存在直接的關系的。兩者沒有必然的聯系，這是一個需要認識清楚的重要的東西，也就是其中一個元素的vertical-align屬性的改變并不會影響另一個元素

總結：

1. vertical-align只對inline或者inline-block屬性的元素起作用，對block屬性的元素是不起作用的，這也是有時候為什么vertical-align會失效的原因

2. vertical-align:text-bottom是指將要對齊的元素和父元素的內容底部進行對齊

3. vertical-align:bottom是指將要對齊的元素和父元素的相對底部進行對齊，而不是相對父元素的內容底部進行對齊

4. 任何一個元素的vertical-align屬性的表現形式都只和其父元素有關系，而和其余元素是沒有任何關系的，我們通常遇見的和垂直居中對齊都是假象

總結

以上是生活随笔為你收集整理的我对CSS vertical-align的一些理解与认识（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。