再次認(rèn)識 vertical-align

William_Sang 發(fā)布于2019-08-30 13:11 / 1886人閱讀

摘要：因為第三格的距離還是存在，也就能理解之前的有一種解決方案，如果中不存在文本，直接設(shè)置。單元格垂直居中。單元格的內(nèi)邊距的下邊緣與行的底端對齊。

css中的基礎(chǔ)知識，上次在刷 segmentfault 遇見了一個相關(guān)的問題有再次看過 vertical-align 的描述。今天自己也遇見一個類似的問題，再次深入學(xué)習(xí)一下。
vertical-align 用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

憶童年學(xué)習(xí)（涉及后文理解）

無論當(dāng)初起跑的時候你學(xué)的是英語還是拼音，最后你還能記得英語的26個字母用拼音的方式怎么讀嗎？所以這個時候我就可以裝一裝了，我不是學(xué)的拼音。
由于后文學(xué)習(xí)的知識會涉及到小學(xué)知識，作為小學(xué)學(xué)霸的我開始發(fā)車了，沒上車的趕快上車。

大致畫了一個 四線三格 然后寫了26個字母。總結(jié)了一些寫法上面的規(guī)則如下：

大寫字母始終寫在上兩格

小寫字母 bdfhiklt 寫在上兩格

小寫字母 gpqy 寫在下兩格

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

小寫字母除上述三種小寫字母的情況以外都是寫在中間格

語法學(xué)習(xí)

行內(nèi)元素（inline）

vertical-align: baseline; 默認(rèn)值情況下，元素基線與父元素的元素基線對齊。

父元素內(nèi)的字母基線剛剛按照我畫的第三條線為基線，圖片的基線與父元素的基礎(chǔ)對齊，圖片高度（15px）不足父元素基線到頂部的高度。
如果我試著不限制圖片的高度不限制（50px），接下來會發(fā)現(xiàn)父元素被撐高了。但是頂部與父元素頂部平齊，底部與父元素內(nèi)的文本的第三條基線對齊（畫的基線只是作為參考）。

如果去掉小寫字母 gpqy 會發(fā)現(xiàn)圖片與div的底部還是會存在一個距離

通過上兩圖的對比，能發(fā)現(xiàn)我之前遇見的問題，就是img放置在div中，div的高度會比圖片的高度高3px,3.5px,4px等情況。因為第三格的距離還是存在，也就能理解之前的有一種解決方案，如果div中不存在文本，直接設(shè)置 font-size: 0; 。但瀏覽器有最小字體限制，也就不是那么好的解決方案了。

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

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

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

vertical-align: text-bottom; 元素底端與父元素字體的底端對齊（為了與上面的super區(qū)分開來，給父元素加了一個高于本身高度的 line-height）。

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

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

這里以父元素中的 y 作為參考直接的可以看出給 img 添加 top/bottom/middle 的情況。如果父元素設(shè)置了行高會出現(xiàn)什么情況呢？

為什么設(shè)置 vertical-align: middle; 能解決高度問題？

舉例：

默認(rèn)的vertical-align: baseline; 因此會在img與div底部之間有第三格中超出的內(nèi)容的距離，這個具體的距離和字體的大小也有關(guān)系。如果設(shè)置圖片為vertical-align: middle; 后，圖片在父元素內(nèi)是居中的，此時圖片的高度如果大于內(nèi)容的高度的時候，父元素的高度就會剛好等于圖片的高度。

為什么父元素設(shè)置 line-height 后 vertical-align: bottom; 會出現(xiàn)如下情況？

這種情況應(yīng)該是最糟糕的，設(shè)置line-height后父元素的基線不那么固定了，但是還是以父元素內(nèi)文本字體的基線相關(guān)，并且隨著字體的大小的變化而變化，當(dāng)字體大小為0的時候才正好與父元素的底部對齊。

表格元素（table/table-cell）

表格元素中我們用到垂直居中的地方應(yīng)該是比較多的，對于table元素或者是table樣式均可以正常向上面的行內(nèi)元素一樣設(shè)置對齊方式。
vertical-align: top; 單元格的內(nèi)邊距的上邊緣與行的頂端對齊。
vertical-align: middle; 單元格垂直居中。
vertical-align: bottom; 單元格的內(nèi)邊距的下邊緣與行的底端對齊。

總結(jié)

知識點小，但是真正理解或者說遇見類似對齊的問題問題依然是問題，仔細(xì)理解了，下次應(yīng)該能很好的面對問題了吧。

參考資料

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