不知道大家對vertical-align是否碰到了麻煩，今天對其做了一個系統的分析，主要有兩篇文章向大家推薦，深入理解了這兩篇文章，相信大家就能解決很多實際碰到的問題。具體能夠解決什么問題，讀透了，自然就知道了。
流氓文章一：大家都對vertical-align的各說各話
官方文章二：各瀏覽器對常用行內替換元素的 'baseline' 位置理解不同
在這兒，我先截一個圖放在這里——
這個圖來自第一個文章，這里的文本font-size: 18px;行高(這里由父元素決定) line-height: 36px;，這張圖能夠清晰的看出font-size和line-height屬性對vertical-align的影響，能夠清晰的明白top/text-top/middle/baseline/text-bottom/bottoim這六個屬性值的含義。這樣就能夠簡單認識CSS api中對vertical-align的介紹了。
baseline: 默認值。將支持 valign 特性的對象的內容與基線對齊
top: 將支持 valign 特性的對象的內容對象頂端對齊
text-top: 將支持 valign 特性的對象的文本與對象頂端對齊
middle: 將支持 valign 特性的對象的內容與對象中部對齊
bottom: 將支持 valign 特性的對象的內容與對象底端對齊
text-bottom: 將支持 valign 特性的對象的文本與對象底端對齊
看了api，它的解釋還是含糊其辭。不急，再看第二篇文章中的這個圖——
根據上圖可直觀看出各瀏覽器對於行內替換元素的基線位置理解不一，特別是對有文字和無文字的按鍵元素基線位置和 INPUT 元素的基線位置理解不一。而在 IE6 IE7 IE8(Q) 內，所有行內替換元素的基線位置幾乎一致處於元素底邊界附近。
細看文章里對於該圖的總結表格，能夠看出各瀏覽器對baseline的設定的差異性。
我們常常會用到其中兩個到3個行內塊元素(或行內元素)並排的情況，由於每個瀏覽器對各自的元素(如img/button/iframe/input/textarea等)baseline解析的差異性，導致排列錯亂的現象。
清晰的認識每個元素在各個瀏覽器中對vertical-align的解析情況，能夠幫助我們快速解決兼容性問題。
需要記住：
1.vertical-align不可繼承；
2.對行內(塊)元素起作用；
3.vertical-align的作用是確定該元素與包含該元素的父級塊元素中top/text-top/middle/baseline/text-bottom/bottom六線譜之間的關系。
對於這類排列性的bug，第二篇文章的解決方案是——
避免使用 'baseline' 對齊方式，為元素指定 'vertical-align' 值非 'baseline'，推薦使用 'vertical-align:bottom' 或 'vertical-align:top'。
鏈入其他相關問題的官方文章——
IE6 IE7 IE8(Q) 中行框的頂邊與底邊位置識別有誤
Safari Chrome 中行框高度計算有誤