再次認識 vertical-align

css中的基礎知識，上次在刷 segmentfault 碰見了一個相關的問題有再次看過 vertical-align 的描述。今天本身也碰見一個相似的問題，再次深刻學習一下。
vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

憶童年學習（涉及後文理解）

不管當初起跑的時候你學的是英語仍是拼音，最後你還能記得英語的26個字母用拼音的方式怎麼讀嗎？因此這個時候我就能夠裝一裝了，我不是學的拼音。
因爲後文學習的知識會涉及到小學知識，做爲小學學霸的我開始發車了，沒上車的趕快上車。

大體畫了一個 四線三格 而後寫了26個字母。總結了一些寫法上面的規則以下：

• 大寫字母始終寫在上兩格

• 小寫字母 bdfhiklt 寫在上兩格

• 小寫字母 gpqy 寫在下兩格

• 小寫字母 j 寫在上中下三格

• 小寫字母除上述三種小寫字母的狀況之外都是寫在中間格

語法學習

vertical-align 的默認值是 baseline，能夠選擇的值有baseline | sub | super | text-top | text-bottom | middle | top | bottom | 百分數 | 固定值。

行內元素（inline）

vertical-align: baseline; 默認值狀況下，元素基線與父元素的元素基線對齊。

父元素內的字母基線剛剛按照我畫的第三條線爲基線，圖片的基線與父元素的基礎對齊，圖片高度（15px）不足父元素基線到頂部的高度。
若是我試着不限制圖片的高度不限制（50px），接下來會發現父元素被撐高了。可是頂部與父元素頂部平齊，底部與父元素內的文本的第三條基線對齊（畫的基線只是做爲參考）。

若是去掉小寫字母 gpqy 會發現圖片與div的底部仍是會存在一個距離

經過上兩圖的對比，能發現我以前碰見的問題，就是img放置在div中，div的高度會比圖片的高度高3px,3.5px,4px等狀況。由於第三格的距離仍是存在，也就能理解以前的有一種解決方案，若是div中不存在文本，直接設置 font-size: 0; 。但瀏覽器有最小字體限制，也就不是那麼好的解決方案了。

vertical-align: sub; 元素的基線與父元素的下標基線對齊。（底部高度合適，內容沒有被擠出四線格）

vertical-align: super; 元素的基線與父元素的上標基線對齊。（頂部高度不夠，內容被擠出了四線格）

vertical-align: text-top; 元素頂端與父元素字體的頂端對齊。

vertical-align: text-bottom; 元素底端與父元素字體的底端對齊（爲了與上面的super區分開來，給父元素加了一個高於自己高度的 line-height）。

vertical-align: middle; 元素中線與父元素的小寫x中線對齊。

vertical-align: top; 元素及其後代的頂端與整行的頂端對齊。
vertical-align: bottom; 元素及其後代的底端與整行的底端對齊。

這裏以父元素中的 y 做爲參考直接的能夠看出給 img 添加 top/bottom/middle 的狀況。若是父元素設置了行高會出現什麼狀況呢？

爲何設置 vertical-align: middle; 能解決高度問題？

舉例：

<div>
    <img src="" alt="">
</div>

默認的vertical-align: baseline; 所以會在img與div底部之間有第三格中超出的內容的距離，這個具體的距離和字體的大小也有關係。若是設置圖片爲vertical-align: middle; 後，圖片在父元素內是居中的，此時圖片的高度若是大於內容的高度的時候，父元素的高度就會恰好等於圖片的高度。

爲何父元素設置 line-height 後 vertical-align: bottom; 會出現以下狀況？

這種狀況應該是最糟糕的，設置line-height後父元素的基線不那麼固定了，可是仍是以父元素內文本字體的基線相關，而且隨着字體的大小的變化而變化，當字體大小爲0的時候才正好與父元素的底部對齊。

表格元素（table/table-cell）

表格元素中咱們用到垂直居中的地方應該是比較多的，對於table元素或者是table樣式都可以正常向上面的行內元素同樣設置對齊方式。
vertical-align: top; 單元格的內邊距的上邊緣與行的頂端對齊。
vertical-align: middle; 單元格垂直居中。
vertical-align: bottom; 單元格的內邊距的下邊緣與行的底端對齊。

總結

知識點小，可是真正理解或者說碰見相似對齊的問題問題依然是問題，仔細理解了，下次應該能很好的面對問題了吧。

參考資料

https://developer.mozilla.org...