首先看看w3c中是怎麼描述的。
很重要的一點就是它是針對行內元素起作用的，如果不是行內元素或者沒有設定成display:inline或者display：inline-block的元素就可能出現各種各樣的問題，有的生效了，有的卻沒有生效。
這裡我舉例來說明一下。 **如下所示：
vertical-align的研究
h4>
17<
span
class
="out-box"
>
18<
div
class
="in-box"
>
19div
>
研究vertical-align屬性的作用
20span
>
21div
>
22body
>
html
>
結果如下圖所示：
，我們可以將div標籤換成span標籤，將浮動去掉，並且新增display：inline-block，然後再去改變值，哈哈。小藍色方塊的位置改變了。這說明了之前的結論。
對各個值的說明 摘自w3cshool ，方便大家理解值描述
baseline
預設。元素放置在父元素的基線上。
sub垂直對齊文字的下標。
super
垂直對齊文字的上標
top把元素的頂端與行中最高元素的頂端對齊
text-top
把元素的頂端與父元素字型的頂端對齊
middle
把此元素放置在父元素的中部。
bottom
把元素的頂端與行中最低的元素的頂端對齊。
text-bottom
把元素的底端與父元素字型的底端對齊。
length
%使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit
規定應該從父元素繼承 vertical-align 屬性的值。
注意：這些值都是基於父元素的（好好的理解下父元素）。
關於上面各個值的深刻含義 ，對baseline等不理解的，在經典論壇中有一篇很好的文章
1) 在ie6,7下，行高對vertical-align設定的元素是沒有作用的 text-top和top，text-bottom 和bottom的作用是一樣的。都是和父元素的文字上對齊和下對齊。但是在ie7上面有一段空白。如果設定屬性值為middle的時候，
會和父元素居中對齊。如果影象比文字的行高高些，移動的是文字，而非被設定的元素，反之，則是影象了。 個人認為ie6,7對這個屬性是誤解了。
2) 除了ie6,7 ，vertical-align受line box的影響，什麼是line box ，之前我講過這個概念。就是行盒，它是將每一行看成乙個盒子，既然是盒子肯定是有高度的，它的高度是由其內部一串行inline box的高度共同決定的，
受line box的影響其實本質上來說就是受行高的影響。如果行高大於被設定vertical-align的元素的高度的時候，那麼無論怎麼調節值，如果其中包含文字的話，文字是不會動的。其實，可以將line-box 看稱是父元素。
他們都是基於父元素而進行微調的。很明顯其他的元素是不動的。
3) 除了ie6,7如果行高小於要的時候，這個時候和文字將相互影響，共同決定的line box的高度。對於 middle& top& bottom 這3個值在ie8,9 以及firefox3.6 chrome的表現是一樣的。
4) ie8+和非le序列對text-top&& text-bottom的理解不一樣。 在ie8+裡面 和文字是水平上對齊的，但是在firefox 3.6， chrome中和文字在垂直方向上有一段距離，為什麼呢，看看w3c關於 text-top 和text-bottom的解釋，很容易看出他們是相對于父元素字型對齊的。我用工具量了一下。是204px。為什麼事204px呢？因為我的父行高是140px，而行高是可以繼承的，因此那個「前面」的行高也是140px，可以算出它到頂部是64px
為什麼是64px呢，如果和「後面」這2個文字是居中對齊的話，將往下移動70px，但是由於是頂部對齊的，所以往上移動了半個字的高度，之前我把字設定了12px的大小。剛好是6px。text-bottom 的解釋也是類似的。
附圖和我研究的**：
vertical-align的研究
h4>
18<
span
class
="out-box"
>
19<
span
class
="in-box"
>
20span
>
研究vertical-align屬性的作用
前面span
>
後面。24
div>
25div
>
26body
>
html
>
圖形如下所示：
在ie8,9的顯示是
如果有什麼沒有涉及到的，歡迎各位拍磚！！謝謝
vertical align 樣式理解
文章參考 適用於 行內元素和單元格 table cell 元素 個人理解應用範圍 1 和 文字混排，使用vertical align屬性來定位 2 在table標籤中的td種使用vertical align屬性來定位 可以使用display table cell,注意該標籤父div一定是displa...
解析vertical align屬性
vertical align 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。即 1.只對行內元素起作用 若屬性中有display inline block 或float...
再次認識 vertical align
css中的基礎知識，上次在刷 segmentfault 遇見了乙個相關的問題有再次看過 vertical align 的描述。今天自己也遇見乙個類似的問題，再次深入學習一下。vertical align 用來指定行內元素 inline 或 單元格 table cell 元素的垂直對齊方式。無論當初起...