vertical-align，今晚來我房間聊聊劇本

做者GitHub：GitHub

仍是來GitHub點個Star吧，啊，各位吳彥祖和高圓圓？

寫在前面

CSS最使人困惑的屬性是什麼？vertival-align

由於它老是達不到咱們想要的效果

一個logo加一個標題，一個頭像加一個名字，要讓它們倆垂直居中

一通亂試以後，是否是隻能惱怒的用float或者margin、padding

今天，咱們就來好好調教一下vertival-align這個傲嬌女神

概念

• line box

由若干行內元素佔據的一行，會有一個虛擬的框，該行全部行內元素都在這個框裏面，W3C把這個框叫作line box

line box的高度由裏面最高的行內元素撐起

若是裏面行內元素的總寬度超過一行，則換行顯示

• text box

假如line box裏面有一個英文字母x，這個字母的全部屬性均繼承自父元素

你把字母x用span包裹起來，設置背景顏色，背景顏色覆蓋的高度就是text box的高度

固然，它是由font-size和line-height共同決定的

text box是有其實的，你看那字母x明晃晃的背景顏色

只不過名字是我杜撰的，跟line box對應

W3C叫它父元素的文字，我以爲不是很好理解

• 金線

vertival-align是垂直對齊屬性，那它是跟誰對齊呢？

確定是跟line box相關的某條線對齊，我把它叫作金線

咱們都知道，小寫字母x落在text box的基線上，小寫字母g落在text box的底線上

字母x的下邊緣就是vertival-align: baseline;所要對齊的金線

金線這個名字也是我取的，由於它是一個準繩

其實說白了vertival-align默認值對齊的就是text box的基線，因此它跟父元素的font-size和line-height都有關係

本文不討論它們之間的關係，假設父元素的font-size和line-height都是固定的

固然不一樣的屬性值，金線的標的也是不同的，後面會講到

金線雖然是一個準繩，它卻沒什麼骨氣，有時候會去遷就比較高的行內元素

• inline元素和inline-block元素

vertival-align只對這兩種元素（或者變種）有效

一招鮮

我們先來一個命中率極高的解決方案

回到最前面的問題：一個logo加一個標題，一個頭像加一個名字，要讓它們倆垂直居中

<div>
    <img src="avatar.png">
    <span>biu</span>
</div>
複製代碼

你給span加vertical-align: middle;，但是達不到效果

你給img加vertical-align: middle;，仍是達不到效果

不是說好的垂直居中嘛，無賴呀！

其實，你給它們倆都加上vertical-align: middle;試試，效果是否是出來了？

咱們潛意識確定認爲vertical-align是相對另外一個元素對齊，不然怎麼會指望達到咱們想要的效果呢？

由於vertical-align是相對金線對齊，每一個元素都要分別設置才能統一實現垂直居中

那你說我寫在父元素上可不能夠？

想走捷徑，能夠

你在父元素上寫vertical-align: middle;，而後你還要在每個行內元素上寫vertical-align: inherit;

由於vertical-align默認是不繼承的

驚不驚喜！

固然，若是父元素顯式的設置了高度，而且比裏面任何行內元素都要高，那一招鮮也蔫了，後面有例子

屬性值

<style type="text/css"> body { margin: 0; } .line-box { padding: 0 80px; background: #ff0; } .x { background: #6ade91; } .rect { display: inline-block; width: 100px; margin: 0 20px; background: #6ade91; overflow: hidden; } .top { height: 300px; vertical-align: top; } .bottom { height: 100px; vertical-align: bottom; } .text-top { height: 200px; vertical-align: text-top; } .text-bottom { height: 400px; vertical-align: text-bottom; } .middle { height: 100px; vertical-align: middle; } .baseline { height: 200px; vertical-align: baseline; } .visible { height: 200px; background: #f00; vertical-align: baseline; overflow: visible; } </style>

<div class="line-box">
    <span class="x">x</span>
    <span class="rect top">top</span>
    <span class="x">x</span>
    <span class="rect bottom">bottom</span>
    <span class="x">x</span>
    <span class="rect text-top">text-top</span>
    <span class="x">x</span>
    <span class="rect text-bottom">text-bottom</span>
    <span class="x">x</span>
    <span class="rect middle">middle</span>
    <span class="x">x</span>
    <span class="rect baseline">baseline</span>
    <span class="x">x</span>
    <span class="rect visible">
        <span>baseline</span>
        <span>visible</span>
    </span>
    <span class="x">x</span>
</div>
複製代碼

經過這張圖，咱們來聊一聊不一樣屬性值所對應的金線是什麼

• top: 金線所在的位置是line box的上邊

• bottom: 金線所在的位置是line box的下邊

• text-top: 金線所在的位置是text box的上邊，也就是字母x背景顏色的上邊

• text-bottom: 金線所在的位置是text box的下邊，也就是字母x背景顏色的下邊

• middle: 金線所在的位置是字母x的中部，也就是叉相交的地方

• baseline: 金線所在的位置是字母x的下邊

須要注意的是，最後一個矩形和前一個矩形都是vertical-align: baseline;，不一樣的是最後一個矩形overflow的屬性值是visible

而前面全部矩形都是overflow: hidden;

爲何呢？

由於若是行內元素裏面有文字，而行內元素的垂直對齊又是默認值時，是以行內元素裏面最底部的文字基線和text box的基線對齊

然而若是設置了overflow: hidden;，就會觸發BFC，文字就不會影響對齊點了

我是爲了附上文字，方便比較，因此讓前面的矩形都觸發了BFC

一個例子

我但願實現圖片垂直居中，怎麼弄？

直接給圖片設置vertical-align: middle;確定是不行的

由於圖片比較高，金線會去遷就圖片

結果就是圖片紋絲不動，字母x對齊圖片中間

<style type="text/css"> body { margin: 0; } .box { height: 500px; padding-left: 300px; background: #ff0; } .box img { width: 200px; vertical-align: middle; } </style>

<div class="box">
    <span>x</span>
    <img src="Adjani.png">
</div>
複製代碼

我看到網上有一篇文章是這樣作的

加一個span標籤，變成inline-block元素，高度和父元素同樣高，寬度1px，若是沒有背景顏色，它幾乎能夠忽略不計

而後給圖片和這個span同時設置vertical-align: middle;

哎，發現真的可行

他解釋說圖片須要一個居中對齊的標杆，因此生造一個span，就可使圖片居中了

效果是達到了，然而解釋是錯誤的

圖片對齊span，那span對齊誰呢？

其實圖片和span都是對齊金線，由於span的高度和父元素的高度一致，金線爲了遷就它，就跑到父元素中間去了。而後圖片再去對齊金線，因而圖片也居中了

標杆永遠是金線，只不過金線的位置是動態計算的，有時候要去遷就比較高的行內元素

<style type="text/css"> body { margin: 0; } .box { height: 500px; padding-left: 300px; background: #ff0; } .box img { width: 200px; vertical-align: middle; } .box .blank { display: inline-block; width: 1px; height: 500px; background: #f00; vertical-align: middle; } </style>

<div class="box">
    <span>x</span>
    <img src="Adjani.png">
    <span class="blank"></span>
</div>
複製代碼

其實還有一種辦法，給父元素設置行高等於高度

這時候text box的高度和父元素的高度是同樣的，金線不須要去遷就職何人，圖片只管對齊它就是了

<style type="text/css"> body { margin: 0; } .box { height: 500px; line-height: 500px; padding-left: 300px; background: #ff0; } .box img { width: 200px; vertical-align: middle; } </style>

<div class="box">
    <span>x</span>
    <img src="Adjani.png">
</div>
複製代碼

總結

首先，line box裏有一個text box，同時還有一根金線

不一樣的垂直對齊屬性值，對標的金線是不一樣的，因此多個元素可能對標多根金線，這是沒問題的

金線雖然是準繩，但它的高度是動態計算的，有可能要去遷就很高的行內元素

若是行內元素裏面有文字，且屬性值爲baseline的時候，是以裏面文字的基線去對齊金線

但若是觸發BFC，則上一條失效

張鑫旭講到過，middle只是近似垂直居中，有興趣的能夠去了解一下

若是金線跟text box有關，你能夠在line box裏放一個沒有任何樣式的小寫字母x，給它一個背景色（好吧背景色也是樣式），方便查看金線大概在哪裏

金線，當它是text box的一部分時，確定跟父元素的font-size和line-height是有關的，這個之後咱麼再聊

其實大多數狀況，一招鮮均可以解決，就是給全部行內元素設置垂直居中

總之，找到金線，你就找到組織了

寫在後面

我和大家同樣，每次見到一行有多個行內元素就犯怵

因此下定決心弄清楚vertical-align的原理，但願對你們有一點微小的啓發

以上都是我本身的理解，金線也是我自創的，可能不是很嚴謹

CSS是一門玄學，夠用就好

做者GitHub：GitHub

仍是來GitHub點個Star吧，啊，各位吳彥祖和高圓圓？