CSS進階（8）—— 內聯元素的掌管者line-height和vertical-align（下）

上一章主要講了line-height相關的知識，本章就來聊聊一樣無處不在的vertical-align。vertical-align和line-height同樣，都會影響元素在與水平流垂直方向上的表現，所以瞭解這兩個屬性，對於咱們控制圖文在垂直方向上的表現有很大的幫助。這裏我用了"幫助"，而不是必要，有人告訴我這本書不用一個字一個字看，如今看來確實如此，《CSS world》在某種程度上已經徹底符合"鑽牛角尖"的氣質，但既然看了，就但願能把這個系列作完。

1.vertical-align的五類屬性

拋開inherit這類全局屬性不談，我的把vertical-align分紅五類，做者將第一類和第二類總結成線類。

（1）跟x字母打交道的線類：baseline/middle

（2）基於行框盒子邊緣的線類：top/bottom

（3）跟父級基線相關的文本類：text-top/text-bottom

（4）經常使用於公式的上標下標類：super/sub

（5）具體數值類：2px/2em/20%等

一般狀況下，內聯元素默認都是沿着字母x的下邊緣對齊的，也就是vertical-align的默認值是baseline。但對於圖片等替換元素，每每使用元素自己的下邊緣做爲基線，這一點在過去的簡陋佈局中顯得很是好用，二十年前的網頁你甚至都不須要會寫CSS就可讓讀者正常瀏覽網站內容，可是現在這些"好用的"特色會給咱們的CSS佈局帶來不少不便之處。下面咱們經過實戰來一一測試這些屬性的表現以及利用這些表現實現一些佈局方式。

2.跟x字母打交道的vertical-align:baseline/middle

前面說到了，vertical-align的默認值是baseline,也就是字母x的下邊緣，爲了更好的看清x的下邊緣在哪裏，咱們須要藉助最經常使用的替換元素——圖片。圖片的下邊緣一般爲元素自己，咱們來看字母x和圖片都基於baseline對齊會有什麼表現吧。

<div>
    <span>字母x</span>
    <img src="../小和尚.jpg">
</div>
複製代碼

最終效果以下圖所示：

能夠看到，表現結果跟理論相同，x下邊緣與圖片下邊緣徹底持平，那麼爲何中文"字母"的下邊緣沒有和x下邊緣對齊呢？沒爲何，大部分中文和部分字母的下邊緣就是低於baseline的，別問，問就是不知道。同時，你會發現，圖片的下邊緣會有4px的空隙，致使最終容器的高度多了4px，不少人第一反應就是甩鍋中文，由於中文看起來比字母x大一些，低一些，然而就算你把span標籤刪除了依舊會多出這4個像素。那麼多出的4px是哪裏來的呢？這裏還要請出vertical-align的好朋友line-height一塊兒來解釋這個問題。

首先line-height的默認值是normal，這個值是根據font-size和font-family計算獲得的，獲得的值通常會大於字母x的高度，因爲高度多出來的部分由line-height計算後在文字上下均勻分佈，所以你能夠理解爲多出來的4px是baseline到文字下邊緣的距離。所以，要解決這多出來的4px其實很簡單，修改圖片的vertical-align便可，如，讓他基於字母x的中點對齊。固然這只是理論上，你能夠根據實際需求解決這個問題。

修改後的結果以下圖所示:

說完了baseline,再來聊聊middle。我不敢說不少人，我本身以前在理解vertical-align：middle的時候，認爲CSS在父容器中間找了一條中線，而後讓全部的圖文基於這條中線均勻分佈。事實上，這樣理解的壞處是，你會認爲vertical-align須要加在父容器上，事實上vertical-align只在兩類元素內生效，就是內聯元素和table-cell元素。換句話說，vertical-align屬性只能做用在display計算值爲inline、inline-block、inline-table或table-cell元素上。須要注意的是，浮動，絕對定位等讓元素塊化的操做也會讓vertical-align失效。瞭解了vertical-align的生效範圍後，咱們來看看如何讓內聯元素在垂直方向上居中吧。依舊是剛纔的例子，咱們想讓圖片在固定高度的容器裏用vertical-align:middle屬性垂直居中。

<div>
    <span>字母x</span>
    <img src="../小和尚.jpg">
</div>
<style> div{ height: 400px; background: rgba(0,0,0,0.1); text-align: center; } img{ vertical-align: middle; } </style>
複製代碼

代碼的結果以下圖所示：

結果彷佛不盡如人意，圖片並無垂直居中，爲何會這樣呢？其實答案已經很明顯了，vertical-align：middle屬性已經生效了，在由span和img生成行框盒子中，圖片已經基於字母x的中點垂直居中了，那麼，怎麼讓圖片在父級容器中居中呢？這裏又要請到好朋友line-height的幫助了，只要讓line-height的值等於父容器的高度便可，固然，爲了簡化代碼，咱們能夠去掉height的申明，讓元素保持流的特性，自動撐開容器高度。

這裏圖片已經完美垂直居中了，但對於文字，可能會有必定的誤差，由於字母x的中點和許多文字的實際中點會有所誤差，這個居中屬性在文字偏大的時候就顯得明顯偏下或偏上了。所以在實際使用的過程當中，不要盲目迷信vertical-align的文字居中能力。

3.基於行框盒子上下邊緣對齊的top/bottom屬性

vertical-align：top；表示當前內聯元素的頂部在垂直上邊緣對齊。在table-cell中表示元素底padding邊緣和表格行的頂部對齊。這裏咱們只討論內聯元素。下面咱們經過一個實例來探究一下這句話的涵義。代碼以下：

<div>
    <span style="font-size: 14px">14px</span>
    <span style="font-size: 16px">16px</span>
    <span style="font-size: 18px">18px</span>
    <span style="font-size: 20px">字母x</span>
    <img src="../小和尚.jpg">
</div>
<style> div{ height: 400px; background: rgba(0,0,0,0.1); } span{ vertical-align: bottom; } img{ vertical-align: bottom; } </style>
複製代碼

產生的結果以下，從下圖能夠很明顯的看出來，內聯元素的上下邊緣對齊的邊緣是行框盒子的邊緣，不要混淆理解成了父級容器的邊緣。

4.從瞭解到棄用：vertical-align的文本屬性類

當你深刻理解了這個屬性以後，你就會發現這個屬性很難有什麼軟用。（這句話寫在開頭是爲了讓你少鑽點牛角尖）

做者在給vertical-align屬性分類的時候，將baseline/middle/top/bottom分爲一類，其實都是基於行框盒子進行劃分的，只是我的由其表現差別性又細分紅了兩類。而文本屬性類text-top/text-bottom在垂直方向佈局的時候則和行框盒子沒有多大關係了。

vertical-align:text-top 表示盒子的頂部和父級應有內容區域的頂部對齊。vertical-align:text-bottom 表示盒子的底部和父級應有內容區域的底部對齊。

內容區域指的是在默認狀態下用鼠標選中文本時的背景藍色區域，這裏說的父級應有的內容區域指的是根據父級的font-size和font-family計算獲得的內容區域。

有興趣的能夠參考[原文例子](https://demo.cssworld.cn/5/3-9.php)。這裏就不深究這個看不到前途的屬性了。

5.簡單瞭解vertical-align的上標下標類屬性

HTML裏有兩個標籤，sup上標，和sub下標。

sup對應的默認vertical-align：super。

sub對應的默認vertical-align：sub

這兩個屬性無需多作說明，只需看一下他的具體效果便可。

<div>
    H<sub>2</sub>O<sup>[1]</sup>
</div>
<div>[1]：H<sub>2</sub>O是水的分子式</div>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

H ₂O ^[1]

[1]：H ₂O是水的分子式

6.vertical-align被忽略的實用數值屬性

做者在原文中嘲諷"不少即便工做不少年的前端開發人員，可能不知道vertical-align的屬性值支持數值，更不知道支持負值"，這着實讓他感到意外，沒錯我就是那個可能過一萬年都不會去知道這個值的程序員。在說明這個屬性的好處以前，先來看一個利用vertical-align「垂直居中」元素的例子。

<div style="line-height: 150px;">
    <span style="vertical-align: middle;font-size: 50px">我想垂直居中，卻有些偏下</span>
    <img src="../小和尚.jpg" style="vertical-align: middle;width: 50px;height: 50px">
</div>
複製代碼

從結果上來看，因爲中文相對於x的middle表現的整體偏下，在文字偏大的時候這個問題就表現得尤其明顯了，然而圖片在這個時候表現得又比文字要好，若是是文字+圖標（icon）的格式，每每會使得文字看起老是偏下，圖標總有一些偏上，如今你知道鍋應該甩給文字了。這個時候就要請咱們的vertical-align數值屬性來精確的調整文字的位置了。在不知道數值怎麼設置的狀況下，不如先來看看vertical-align:0，會發生什麼，同時爲了便於觀察，把圖片的垂直居中也改成基於基線對齊。

<div style="line-height:150px;position: relative;">
    <span style="vertical-align: 0;font-size: 50px">個人vertical-align是0，x</span>
    <img src="../小和尚.jpg" style="vertical-align: baseline;width: 50px;height: 50px">
</div>
複製代碼

這時候能夠看到，vertical-align:0的表現和vertical-align:baseline的表現如出一轍！所以，vertical-align：數值，是基於baseline對齊的，爲了圖片和文字最終能居中，咱們固然先要保證圖片先居中（由於圖片替換屬性的特性的總能保持徹底居中），再去調整文字的數值。最終調整結果以下

<div style="line-height:150px;position: relative;">
    <span style="vertical-align: -10px;font-size: 50px">藉助x輔助調整數值，x</span>
    <img src="../小和尚.jpg" style="vertical-align: middle;width: 50px;height: 50px">
</div>
複製代碼

除了數值，vertical-align還支持基於line-height的百分比計算數值，我的以爲沒什麼用就不說明了。

7.baseline在inline-block元素中的詭異表現

又到了CSS靈異事件的部分了，我以爲這些個靈異事件甚至能夠單獨抽出一個章節來說。vertical-align屬性的默認值baseline在文本之類的內聯元素那裏是指x的下邊緣，對於替換元素則是替換元素的下邊緣，看完這章應該對這兩句話有很深的印象了，可是，若是是inline-block元素，規則就要複雜一些了。

一個inline-block元素，若是裏面沒有內聯元素（包括匿名內聯元素），且overflow不是visible，則該元素的基線是其margin盒子的底邊緣，不然，其基線就是其元素裏面最後一行內聯元素的基線。

由於inline-block元素在實際開發中很是重要，搞清楚inline-block的詭異CSS是十分有必要的，理論看起太乾，不如來個實際例子看看究竟是怎麼回事。

<div>
    <span style="margin-bottom: 10px"></span>
    <span>我有本身的內x</span>
</div>
<style> div{ background: rgba(0,0,0,0.1); } span{ background: rgba(0,0,0,0.5); display: inline-block; width: 100px; height: 100px; } </style>
複製代碼

能夠看到第一個inline-block元素因爲沒有內容致使其baseline位置發生改變，變成了margin盒子的下邊緣，而另外一個inline-block元素的基線是其最後一個行框盒子的基線，在本例中，就是第二行的x字母，因爲inline元素的佈局是基於baseline的，所以就出現瞭如圖所示的"錯位"。

除了空inline-block元素和非空inline-block元素會發生錯位，行數不一樣的inline-block元素也會發生錯位。以下圖所示：

雖然這兩種狀況都會發生錯位，但須要注意他們發生錯位的機制徹底不一樣！

想要解決這個錯位問題其實很簡單，只要你明白錯位問題的產生的根本緣由是inline-block元素和baseline有過節便可，因此inline-block元素的vertical-align能夠用不基於基線的屬性，因爲數值屬性也是基於基線的所以也會發生錯位問題，因此須要具體問題具體分析，我只給出一種最簡單的解決方案。以下所示

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。