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/zh-CN/docs/Web/CSS/vertical-align