關於vertical-align

前言

爲何寫這篇總結？最近在文字圖標垂直對齊上用到css的vertical-align屬性，可是有的時候有效，有的時候無效，經常迷惑不解，反思這是本身對vertical-align的基本認知不夠形成的。因此想在本身理清問題來龍去脈的同時，加深對vertical-align的理解，產出以下筆記。

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

行內元素：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 | <percentage> | <length>

註釋： 根據MDN說明，取值可分爲三大類

• 相對父元素的值（使設置該屬性的元素相對其父元素垂直對其）

  • baseline 默認值，元素的基線相對於父元素的基線對齊
  • sub 元素的基線與父元素的下標基線對齊
  • super 元素的基線與父元素的上標基線對齊
  • text-top 元素的頂部與父元素的文字頂部對齊
  • text-bottom 元素的底部與父元素的文字底部對齊
  • middle 元素的中部與父元素的基線+父元素x-height/2（父元素字母x的高度的一半）對齊
  • <length> 元素基線對齊到父元素基線上方的指定位置,可取負值

  • <percentage> 元素基線對齊到父元素基線上方的對應百分比位置。該百分比相對於父元素的line-height,可取負值

查看代碼

---

注：<length>,<percentage>取負值越多時距離上頂端越遠，和margin取值相反
   沒有基線的元素，使用外邊距的下邊緣替代。

---

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

  • top 使元素及其後代元素的頂部與整行的頂部對齊
  • bottom 使元素及其後代元素的底部與整行的底部對齊

---

• 表格單元格的值

  • baseline(以及 sub, super, text-top, text-bottom, <length>, <percentage>) 使單元格的基線，與該行中全部以基線對齊的其它單元格的基線對齊
  • top 使單元格內邊距的上邊沿與該行頂部對齊
  • middle 使單元格內邊距盒模型在該行內居中對齊
  • bottom 使單元格內邊距的下邊緣與該行的底部對齊

baseline

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

查看代碼

盒模型的上下邊界 與 baseline

查看代碼

如圖：
綠色：行高的上下邊界
紅色：文本的上下邊界
藍色：baseline位置
左、中、右分別爲行高一、二、0.5的表現，行高爲1時，文本邊界與行高邊界重合。內聯元素的外邊緣與該行高的頂部和底部邊緣對齊。若是行高小於字體的高度，不會受影響，但top, bottom 會對齊文本邊界。

inline-block元素的基線

查看代碼

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

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

baseline的肯定規則

一、inline-table元素的baseline是它的table第一行的baseline。
二、父元素line-box的baseline是最後一個inline-box的baseline。
三、inline-block元素的baseline肯定規則

• 若是內部有line-box，則inline-block元素的baseline就是最後一個做爲內容存在的元素的baseline，而這個元素的baseline的肯定就要根據它自身來定了。
• 若是其內部沒有line-box或它的overflow屬性不是visible，那麼baseline將是這個inline-block元素的底margin邊界。

icon與文本對齊

上圖左爲icon設置vertical-align: middle沒有生效，很明顯圖標和文字沒有對齊。標註參考線後

查看代碼

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

總結：查閱不少資料，算把vertical-align理解了。其中還有一些深刻的知識點沒有記錄，下面會貼上參考資料。
寫這篇筆記同時也解決了我以前的對inline-block元素間存在間隙的疑問以及對應的解決方案，點此進入。
總之 收穫多多 ( • ̀ω•́ )✧

參考資料：
深刻理解css中vertical-align屬性
關於Vertical-Align你須要知道的事情 [原] [譯]
深刻理解css之vertical-align
MDN vertical-align