再次認識 vertical-align

William_Sang 發布于2019-08-30 13:11 / 1875人閱讀

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

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

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

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

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

大寫字母始終寫在上兩格

小寫字母 bdfhiklt 寫在上兩格

小寫字母 gpqy 寫在下兩格

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

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

語法學習

行內元素（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; 能解決高度問題？

舉例：

默認的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...

GPU云服務器云服務器再次再次創業無法再次打開再次購買幕布

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115365.html

CSS世界（文檔）

摘要：整理完了高性能這本書，往下就需要快速處理世界，這本講解特性的書非常值得一讀，內容完整，重點突出，實戰性強，就是語言啰嗦。由于全書內容太多，而且需要一點一點的整理，所以放到了站點上，方便大家查看。整理完了《高性能JavaScript》這本書，往下就需要快速處理《CSS世界》，這本講解CSS特性的書非常值得一讀，內容完整，重點突出，實戰性強，就是語言啰嗦。由于全書內容太多，而且需要一點一...

CNZPH 2019-08-30 15:54 評論0 收藏0
我對line-height及vertical-align的一點理解

摘要：張鑫旭老師在文章我對的一些理解與認識一中提到屬性的表現與否，僅僅與其父標簽有關，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經過摸索測試，才對這句話有種豁然開朗的感覺。匿名元素我是一段卡哇伊的文字。張鑫旭老師在文章《我對CSS vertical-align的一些理解與認識（一）》中提到： vertical-align:middle屬性的表現與否，僅僅與其父標簽有關，至于我們通...

Eidesen 2019-08-30 13:53 評論0 收藏0
我對line-height及vertical-align的一點理解

摘要：張鑫旭老師在文章我對的一些理解與認識一中提到屬性的表現與否，僅僅與其父標簽有關，至于我們通常看到的與后面的文字垂直居中顯示那都是假象經過摸索測試，才對這句話有種豁然開朗的感覺。匿名元素我是一段卡哇伊的文字。張鑫旭老師在文章《我對CSS vertical-align的一些理解與認識（一）》中提到： vertical-align:middle屬性的表現與否，僅僅與其父標簽有關，至于我們通...

Harriet666 2019-08-01 18:27 評論0 收藏0
技本功丨呀~我不會寫CSS之vertical-align（上集）

摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實工作很多年的前端開發人員，也可能不知道的屬性值支持數值，更不知道支持負值，這著實讓我很意外。只顯示文本的時候行高是。上集完敬請期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日閱讀《CSS世界》，筆者的一段話鞭撻...

tianlai 2019-08-30 15:55 評論0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的屬性值詳解以下內容均在中測試默認對齊方式這里作為參考系，而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個的包裹著。前言一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個叫行間距的家伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...

avwu 2019-08-30 12:52 評論0 收藏0