武林網(wǎng)(www.survivalescaperooms.com)文章簡介：vertical-align 圖片文字水平對齊分析.

最近接觸了許多 關(guān)于圖片文字水平對齊的需求，然后發(fā)現(xiàn)如果單單將vertical-align 設(shè)置為middle 的話，不同瀏覽器下居中對齊的位置有偏移，讓人好不蛋疼~ =，=
網(wǎng)上搜了下好像也沒有搜到相關(guān)的分析，大部分都是垂直居中的案例
于是專門針對vertical-align 做了次分析，功夫不負(fù)有心人，分析結(jié)果還是挺好玩的，對vertical-align 又有了一次深入的了解。給力~~~

demo 傳送門： vertical-align 各屬性分析 有錯誤歡迎回復(fù)糾正哦 ^__^

一些心得體會：

最初我認(rèn)為的vertical-align 解釋 跟text-align 一樣，是容器內(nèi)部的非block 元素居中對齊，但~~ 我理解錯了
從w3c 官方對 vertical-align 各屬性的解釋來看，vertical-align 是定義當(dāng)前節(jié)點(diǎn)，跟外圍內(nèi)容的對齊方式，跟text-align 的解釋是不一樣的。

分析所得，發(fā)現(xiàn)baseline不是在中文字的可見部分最下方，而是在英文字的可見部分最下方。
然后發(fā)現(xiàn)圖片對齊的時候是以圖片的最下方同相鄰文字的 baseline 對齊。一直覺得為啥圖片下方會有4像素的空白，現(xiàn)在明白了

我這個demo 用的Tahoma 字體，發(fā)現(xiàn)如果使用類似 Yahei 等中文字體，在IE低版本下會有出現(xiàn)一些奇怪的現(xiàn)象，詳細(xì)可以看demo。

從定義來理解，就發(fā)現(xiàn)這個vertical-align 最好不要混用。因?yàn)楸旧聿煌瑢傩詴a(chǎn)生各種各樣的兼容問題，如果混用，估計會出現(xiàn)更復(fù)雜的現(xiàn)象。雖然我也沒有深入研究，但我覺得混用不太靠譜。

這個屬性一直都沒怎么用，原先一直用middle 來實(shí)現(xiàn)水平對齊，在一次偶爾的項(xiàng)目代碼里發(fā)現(xiàn)的。
相對定位是相對于baseline的偏差定位，負(fù)值代表圖片相對baseline往下移。
在研究中發(fā)現(xiàn)使用相對定位兼容性最好，只有IE7會有2px的偏差，但基本可以無視，因?yàn)槟壳癐E7的用戶可以忽略不計。
不過這種方法也不是萬能的，
因?yàn)槭窍鄬τ赽aseline的相對定位，如果文字變大后，圖片的對齊位置 看起來就不會跟著移動區(qū)別于middle屬性，不過個人覺得這樣的情況出現(xiàn)概率不大，并且字大了再針對調(diào)整也沒問題。
另外圖片大小不一樣大相應(yīng)的負(fù)值也不相同，詳細(xì)見demo。

前面說了這次研究沒有白費(fèi)，個人推薦的vertical-align 用法如下：
1. 盡量保持主內(nèi)容的 vertical-align 是baseline 即默認(rèn)的，不要把vertical-align 當(dāng)text-align 來理解使用。
2. 針對 內(nèi)部需要調(diào)整位置的 圖片等 進(jìn)行 px 定位。
優(yōu)點(diǎn)：保證外圍的vertical-align 是默認(rèn)值，不產(chǎn)生混用現(xiàn)象。
缺點(diǎn)：針對不同尺寸的圖片要針對進(jìn)行定位，不過一般ico 大小差不多大，可以統(tǒng)一調(diào)整。

下一步研究方向：表單元素的vertical-align: px 是否同樣適用 ？