vertical-align

CSS中的vertical-align用于設(shè)置行內(nèi)塊或者行內(nèi)元素行內(nèi)元素的對齊方式，似乎使用起來很簡單，但使用過程中的坑很多，我個(gè)人對于這個(gè)屬性看了比較多的博客，也有點(diǎn)似懂非懂，以下是我的個(gè)人理解以及簡要的總結(jié)。

定義以及常見屬性位置

首先，MDN官方文檔給的定義：vertical-align是設(shè)置元素的垂直排列的。用來定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。

它的值比較多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

我們這里只看常用的：

• baseline:使元素的基線與父元素的基線對齊
• middle：使元素的中部與父元素的基線加上父元素字母x的一半對齊
• top：使元素的頂部與其所在行的頂部對齊
• bottom：使元素底部與所在行的底部對齊

按照官方文檔的分類：

• baseline與middle，使元素相對其父元素垂直對齊。
• top與bottom，使元素相對整行垂直對齊。
• 以下為行內(nèi)元素/行內(nèi)塊的頂線、中線、基線、底線所在位置：

top與bottom的元素整行垂直對齊方式

首先要明白什么叫整行。這里的整行指的是幾個(gè)行內(nèi)元素、行內(nèi)塊元素所在的那一行，整行的高度由該行最高的元素決定。

對于top與bottom的使用，以下是我的個(gè)人理解：

• 首先，我們要找“大哥”，即該行最高的元素。
• 當(dāng)我們對“大哥”使用top與bottom時(shí)，因?yàn)?ldquo;大哥”本就是該行最高的元素了，因此使用這兩種對齊方式，該元素不會(huì)有任何變化。
• 該行其他元素使用top與bottom時(shí)，會(huì)依據(jù)“大哥”的頂線和底線來進(jìn)行對齊。換句話說，只使用top與bottom時(shí)，該行排列的參照物就變成了“大哥”，其他元素相對于“大哥”進(jìn)行對齊。

情形1：（box1：top不變位置；box2：top，自動(dòng)與box1頂線對齊；span：bottom，自動(dòng)與box1底線對齊。）

情形2：（box1：bottom不變位置；box2：top，自動(dòng)與box1頂線對齊；span：bottom，自動(dòng)與box1底線對齊。）

以上兩種情況，看似我使用的是同一張圖，實(shí)質(zhì)上兩種box1的對齊方式并不相同。因此我們可以得出結(jié)論，只使用top與bottom時(shí)，最高元素不變，其余元素以最高元素（本質(zhì)上其實(shí)就是最高元素就是該行高度）為參照物進(jìn)行對齊。

baseline與middle相對于父元素的對齊方式（相對于父元素的基線）。

使用此類屬性值時(shí)，我們首先要搞清楚父元素的基線位置和子元素的基線位置。

• 子元素的基線位置
  • vertical-align的作用對象是 ：inline-level element（內(nèi)聯(lián)級元素），內(nèi)聯(lián)級元素不同的display屬性值對應(yīng)的基線的位置也是不同的。
• 當(dāng)display屬性值為：
  • inline，內(nèi)聯(lián)元素的baseline是里面文本字母 x 的下邊緣線。（即使沒有字母 x，也可以想象文中有一個(gè)字母 x 存在）
  • inline-block，行內(nèi)塊元素的baseline位置的確定規(guī)則分為以下三種情況：
    • inline-block元素盒子里沒有內(nèi)容，baseline的位置為該盒子margin-bottom的邊界（如果margin-bottom為0，那就是盒子的下邊界）。如下圖背景為藍(lán)色的div。
    • inline-block，元素盒子里有內(nèi)容，并且其overflow屬性值為 visible，那么該盒子的baseline的位置就是內(nèi)部內(nèi)容的最后一個(gè)內(nèi)容元素的baseline（依舊是找x的下邊緣線）的位置。如下圖背景為白色的div。
    • inline-block，元素盒子里有內(nèi)容，但是其overflow屬性值為非 visible（比如 overflow: hidden ），那么該盒子的baseline位置就是該盒子 margin-bottom 的邊界。如下圖背景為黃色的div。

父元素的基線位置

• 實(shí)際上，父元素的基線是由子元素的基線位置確定的。

父元素內(nèi)有子元素被設(shè)置 vertical-aling:baseline 并且有內(nèi)容存在時(shí)，父元素的基線的位置是在子元素的基線所在位置，看下面兩張圖（綠色線代表基線）：

接著，我們給父元素另外一個(gè)帶有內(nèi)容的行內(nèi)塊元素，我們可以發(fā)現(xiàn)，另一個(gè)box位置向下偏移了，兩個(gè)盒子基線對齊。這似乎存在前后矛盾。

我們調(diào)換兩個(gè)元素字體大小，基線位置不變，依舊以字體大小最大的行內(nèi)塊元素的基線位置為準(zhǔn)。

• 由此可知：在有子元素并且有內(nèi)容的情況下，父元素基線所在的位置是取在子元素還在默認(rèn)位置時(shí)（可以理解為父元素中只有一個(gè)子元素時(shí)），他們的基線與父元素頂部距離最大的那個(gè)位置，其他同行元素相對于父元素的基線對齊。事實(shí)上，不管元素有無內(nèi)容，父元素的基線都是以距離頂部最大元素的那個(gè)位置為準(zhǔn)。

總結(jié)：父元素基線的位置由子元素確定，父元素基線所在的位置就取在子元素還在默認(rèn)位置時(shí)（可以理解為父元素中只有一個(gè)子元素時(shí)）他們的基線與父元素頂部距離最大的那個(gè)位置，其他同行元素相對于父元素的基線對齊。

父元素基線確定的簡單方法：為父元素添加其偽元素，其 content 的屬性值為 x ，那么父元素的基線就可以看到了——就是字母x的下邊緣線

下面看一個(gè)綜合案例：

其中，紅色盒子為帶有內(nèi)容的中線對齊（middle）行內(nèi)塊、藍(lán)色盒子為帶有內(nèi)容的基線對齊（baseline）行內(nèi)塊、天藍(lán)色部分為行內(nèi)元素span、img圖像默認(rèn)基線對齊圖像、父元素內(nèi)部的文字xxXXjjj以及偽元素（::after--inline-block）且含有xXj內(nèi)容的行內(nèi)塊元素。

我們可以很清晰的看到：

• 紅色部分中線與父元素基線向上1/2 x高度的位置對齊（CSS屬性本身的小問題，可能有幾個(gè)像素的誤差，大體上對齊）
• 藍(lán)色部分基線為最后一行內(nèi)容的基線，且與父元素基線對齊
• 天藍(lán)色span部分基線為內(nèi)容的基線，且與父元素基線對齊
• img圖像部分，基線為盒子最底部margin-bottom，此時(shí)margin-bottom為0，即圖像盒子下邊框?yàn)榇撕凶踊€

到此這篇關(guān)于一文搞懂CSS中的vertical-align屬性的文章就介紹到這了,更多相關(guān)CSS vertical-align屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論