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

資訊專欄INFORMATION COLUMN

關(guān)于vertical-align

kumfo / 1225人閱讀

摘要：內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對齊。如果行高小于字體的高度，不會受影響，但會對齊文本邊界。紅線表示邊界，藍(lán)線表示，黃色為，白色為區(qū)域，綠色為區(qū)域。的確定規(guī)則元素的是它的第一行的。

前言

為什么寫這篇總結(jié)？最近在文字圖標(biāo)垂直對齊上用到css的vertical-align屬性，但是有的時候有效，有的時候無效，常常疑惑不解，反思這是自己對vertical-align的基本認(rèn)知不夠造成的。所以想在自己理清問題前因后果的同時，加深對vertical-align的理解，產(chǎn)出如下筆記。

vertical-align是自css1就存在的屬性，該屬性定義行內(nèi)元素（也就是display值為inline和inline-block的元素）、表格元素（table-cell）以及 ::first-letter、::first-line選擇的元素的基線相對于該元素所在行（line-box）的垂直對齊。

行內(nèi)元素：a, span, b, i, button, input, label, select, textarea 等
表格元素：display為table-cell的元素 一般指td
其他： ::first-letter、::first-line

取值

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom |  |

注釋： 根據(jù)MDN說明，取值可分為三大類

相對父元素的值（使設(shè)置該屬性的元素相對其父元素垂直對其）

baseline 默認(rèn)值，元素的基線相對于父元素的基線對齊

sub 元素的基線與父元素的下標(biāo)基線對齊

super 元素的基線與父元素的上標(biāo)基線對齊

text-top 元素的頂部與父元素的文字頂部對齊

text-bottom 元素的底部與父元素的文字底部對齊

middle 元素的中部與父元素的基線+父元素x-height/2（父元素字母x的高度的一半）對齊

元素基線對齊到父元素基線上方的指定位置,可取負(fù)值

元素基線對齊到父元素基線上方的對應(yīng)百分比位置。該百分比相對于父元素的line-height,可取負(fù)值

查看代碼

   注：,取負(fù)值越多時距離上頂端越遠(yuǎn)，和margin取值相反
   沒有基線的元素，使用外邊距的下邊緣替代。

相對行(line-box)的值（使設(shè)置該屬性的元素相對整行垂直對齊）

top 使元素及其后代元素的頂部與整行的頂部對齊

bottom 使元素及其后代元素的底部與整行的底部對齊

表格單元格的值

baseline(以及 sub, super, text-top, text-bottom, , ) 使單元格的基線，與該行中所有以基線對齊的其它單元格的基線對齊

top 使單元格內(nèi)邊距的上邊沿與該行頂部對齊

middle 使單元格內(nèi)邊距盒模型在該行內(nèi)居中對齊

bottom 使單元格內(nèi)邊距的下邊緣與該行的底部對齊

baseline

baseline基線，字母"x"的下邊沿線

查看代碼

盒模型的上下邊界 與 baseline

查看代碼

如圖：
綠色：行高的上下邊界
紅色：文本的上下邊界
藍(lán)色：baseline位置
左、中、右分別為行高1、2、0.5的表現(xiàn)，行高為1時，文本邊界與行高邊界重合。內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對齊。如果行高小于字體的高度，不會受影響，但top, bottom 會對齊文本邊界。

inline-block元素的基線

查看代碼

圖中左、中、右都是inline-block元素，左圖inline-block元素內(nèi)部存在未脫離文檔流的文本x，中圖在左圖包含文本基礎(chǔ)上添加overflow:hidden，右圖不包含任何文本。紅線表示margin-box邊界， 藍(lán)線表示baseline，黃色為border， 白色為padding區(qū)域，綠色為content區(qū)域。

可見 inline-block元素的外邊緣就是margin-box的邊緣、inline-block元素的baseline的位置要看該元素有沒有處于正常流的內(nèi)容以及元素的overflow屬性值是不是visible。

baseline的確定規(guī)則

1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素line-box的baseline是最后一個inline-box的baseline。
3、inline-block元素的baseline確定規(guī)則

如果內(nèi)部有l(wèi)ine-box，則inline-block元素的baseline就是最后一個作為內(nèi)容存在的元素的baseline，而這個元素的baseline的確定就要根據(jù)它自身來定了。

如果其內(nèi)部沒有l(wèi)ine-box或它的overflow屬性不是visible，那么baseline將是這個inline-block元素的底margin邊界。

icon與文本對齊

上圖左為icon設(shè)置vertical-align: middle沒有生效，很明顯圖標(biāo)和文字沒有對齊。標(biāo)注參考線后

查看代碼

原因在于左邊文字vertical-align使用默認(rèn)值baseline。而vertical-align:middle對應(yīng)元素中部對齊于baseline加上半個x的距離(half of the x-height)，文本會高出icon一段距離。
右圖中，文字與icon都對齊于一個中點，line-box的行高增加，baseline位置不變，文字的baseline稍微下移，位于line-box的baseline的下方。此時文本與圖標(biāo)對齊。

總結(jié)：查閱很多資料，算把vertical-align理解了。其中還有一些深入的知識點沒有記錄，下面會貼上參考資料。
寫這篇筆記同時也解決了我之前的對inline-block元素間存在間隙的疑問以及對應(yīng)的解決方案，點此進(jìn)入。
總之 收獲多多 ( ? ?ω?? )?

參考資料：
深入理解css中vertical-align屬性
關(guān)于Vertical-Align你需要知道的事情 [原] [譯]
深入理解css之vertical-align
MDN vertical-align

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

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

相關(guān)文章

  • 關(guān)于 vertical-align 的一些理解

    摘要：關(guān)于的條參考線以及。關(guān)于和之間的關(guān)系。目標(biāo)元素的的垂直平分線，與父元素內(nèi)匿名的對齊。垂直平分線，這個容易理解。要比這些字母的頂端再高一些。 前言 關(guān)于 vertical-align，我們很容易想到，這不就是告訴我們元素在縱向上和什么對齊的屬性嗎？而事實上，正是這種寬泛的說法導(dǎo)致了我們對其的理解存在許多不確定性。事實上，對齊這兩個字其實牽涉到4個對象：即哪個對象的哪條線，與哪個對象的哪條...

    lowett 評論0 收藏0

  • [翻譯]關(guān)于Vertical-Align你需要知道的事情

    摘要：在元素的和固定的情況下，一點小的改變也很有可能對布局造成影響。其中高度有可能是由元素的內(nèi)容決定的。行高的上下邊界是紅線。元素也有和上下邊界，元素是需要對齊的對象。因此文字的最高點超過了的高度。在第二種情況下，另外兩個元素的位置發(fā)生了下移。 寫在前面的話 開始學(xué)習(xí)前端以來，在CSS相關(guān)知識當(dāng)中困擾我最多的就是Vertical-Align這個屬性。在stackoverflow上查找相關(guān)問...

    reclay 評論0 收藏0

  • [譯]關(guān)于vertical-align:你需要知道的一切

    摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個在文檔流中的元素并且?guī)в袑傩缘脑?。最右，不在文檔流中的元素但是內(nèi)容區(qū)域有高度。元素的基線依賴于元素是否是文檔流中的元素。 原文：Vertical-Align: All You Need To Know 通常我都有需要垂直對齊在一排上一個接著一個的元素。CSS提供了很多種可能...

    wuyangchun 評論0 收藏0

  • vertical-align和baseline的關(guān)系

    摘要：如何讓一段文字居中，在人類看來如此簡單的問題，在界卻變成了多年令人頭疼的問題，關(guān)于居中的文字如汗牛充棟，但每到用時還是會有問題。關(guān)于垂直居中，中最基本的一個屬性就是，要了解，首先要了解基線，因為的缺省值就是。元素放置在父元素的基線上。 如何讓一段文字居中，在人類看來如此簡單的問題，在css界卻變成了多年令人頭疼的問題，關(guān)于居中的文字如汗牛充棟，但每到用時還是會有問題。單單一個『中』是什...

    Steven 評論0 收藏0

  • 關(guān)于css 的垂直居中

    摘要：之前看了張大大的博客總結(jié)一下我對和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來進(jìn)行一些總結(jié)，如果有不對的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因為：表格的單元格的特別屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

    caspar 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<