成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

William_Sang / 1914人閱讀

摘要：因?yàn)榈谌竦木嚯x還是存在，也就能理解之前的有一種解決方案，如果中不存在文本，直接設(shè)置。單元格垂直居中。單元格的內(nèi)邊距的下邊緣與行的底端對(duì)齊。

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

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

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

大致畫(huà)了一個(gè) 四線三格 然后寫(xiě)了26個(gè)字母?？偨Y(jié)了一些寫(xiě)法上面的規(guī)則如下：

大寫(xiě)字母始終寫(xiě)在上兩格

小寫(xiě)字母 bdfhiklt 寫(xiě)在上兩格

小寫(xiě)字母 gpqy 寫(xiě)在下兩格

小寫(xiě)字母 j 寫(xiě)在上中下三格

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

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

vertical-align 的默認(rèn)值是 baseline，可以選擇的值有baseline | sub | super | text-top | text-bottom | middle | top | bottom | 百分?jǐn)?shù) | 固定值。

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

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

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

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

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

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

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

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

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

vertical-align: middle; 元素中線與父元素的小寫(xiě)x中線對(duì)齊。

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

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

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

舉例：

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

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

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

表格元素（table/table-cell）

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

總結(jié)

知識(shí)點(diǎn)小，但是真正理解或者說(shuō)遇見(jiàn)類似對(duì)齊的問(wèn)題問(wèn)題依然是問(wèn)題，仔細(xì)理解了，下次應(yīng)該能很好的面對(duì)問(wèn)題了吧。

參考資料

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115365.html

相關(guān)文章

  • CSS世界（文檔）

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

    CNZPH 評(píng)論0 收藏0

  • 我對(duì)line-height及vertical-align的一點(diǎn)理解

    摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過(guò)摸索測(cè)試，才對(duì)這句話有種豁然開(kāi)朗的感覺(jué)。匿名元素我是一段卡哇伊的文字。 張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到： vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通...

    Eidesen 評(píng)論0 收藏0

  • 我對(duì)line-height及vertical-align的一點(diǎn)理解

    摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過(guò)摸索測(cè)試，才對(duì)這句話有種豁然開(kāi)朗的感覺(jué)。匿名元素我是一段卡哇伊的文字。 張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到： vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通...

    Harriet666 評(píng)論0 收藏0

  • 技本功丨呀~我不會(huì)寫(xiě)CSS之vertical-align（上集）

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

    tianlai 評(píng)論0 收藏0

  • CSS魔法堂：深入理解line-height和vertical-align

    摘要：下的屬性值詳解以下內(nèi)容均在中測(cè)試默認(rèn)對(duì)齊方式這里作為參考系，而它的就是所要對(duì)齊的了。沒(méi)有任何變化。那改變又如何呢為了讓的清晰可見(jiàn)，特意添加一個(gè)的包裹著。 前言 一直聽(tīng)說(shuō)line-height是指兩行文本的基線間的距離，然后又說(shuō)行高等于行距，最近還聽(tīng)說(shuō)有個(gè)叫行間距的家伙，@張?chǎng)涡襁€說(shuō)line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過(guò)本篇來(lái)一探究竟...

    avwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<