資訊專欄INFORMATION COLUMN
摘要：內聯元素的外邊緣與該行高的頂部和底部邊緣對齊。如果行高小于字體的高度，不會受影響，但會對齊文本邊界。紅線表示邊界，藍線表示，黃色為，白色為區域，綠色為區域。的確定規則元素的是它的第一行的。
前言
為什么寫這篇總結？最近在文字圖標垂直對齊上用到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 ||
注釋： 根據MDN說明，取值可分為三大類
相對父元素的值（使設置該屬性的元素相對其父元素垂直對其）
baseline 默認值，元素的基線相對于父元素的基線對齊
sub 元素的基線與父元素的下標基線對齊
super 元素的基線與父元素的上標基線對齊
text-top 元素的頂部與父元素的文字頂部對齊
text-bottom 元素的底部與父元素的文字底部對齊
middle 元素的中部與父元素的基線+父元素x-height/2（父元素字母x的高度的一半）對齊
查看代碼
注：, 取負值越多時距離上頂端越遠，和margin取值相反 沒有基線的元素，使用外邊距的下邊緣替代。
相對行(line-box)的值（使設置該屬性的元素相對整行垂直對齊）
top 使元素及其后代元素的頂部與整行的頂部對齊
bottom 使元素及其后代元素的底部與整行的底部對齊
表格單元格的值
baseline(以及 sub, super, text-top, text-bottom,
top 使單元格內邊距的上邊沿與該行頂部對齊
middle 使單元格內邊距盒模型在該行內居中對齊
bottom 使單元格內邊距的下邊緣與該行的底部對齊
baseline
baseline基線，字母"x"的下邊沿線
查看代碼
盒模型的上下邊界 與 baseline
查看代碼
如圖：
綠色：行高的上下邊界
紅色：文本的上下邊界
藍色：baseline位置
左、中、右分別為行高1、2、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的確定規則
1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素line-box的baseline是最后一個inline-box的baseline。
3、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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116112.html
摘要：關于的條參考線以及。關于和之間的關系。目標元素的的垂直平分線，與父元素內匿名的對齊。垂直平分線，這個容易理解。要比這些字母的頂端再高一些。 前言 關于 vertical-align，我們很容易想到，這不就是告訴我們元素在縱向上和什么對齊的屬性嗎？而事實上，正是這種寬泛的說法導致了我們對其的理解存在許多不確定性。事實上，對齊這兩個字其實牽涉到4個對象：即哪個對象的哪條線，與哪個對象的哪條...
摘要：在元素的和固定的情況下，一點小的改變也很有可能對布局造成影響。其中高度有可能是由元素的內容決定的。行高的上下邊界是紅線。元素也有和上下邊界，元素是需要對齊的對象。因此文字的最高點超過了的高度。在第二種情況下，另外兩個元素的位置發生了下移。 寫在前面的話 開始學習前端以來，在CSS相關知識當中困擾我最多的就是Vertical-Align這個屬性。在stackoverflow上查找相關問...
摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個在文檔流中的元素并且帶有屬性的元素。最右，不在文檔流中的元素但是內容區域有高度。元素的基線依賴于元素是否是文檔流中的元素。 原文：Vertical-Align: All You Need To Know 通常我都有需要垂直對齊在一排上一個接著一個的元素。CSS提供了很多種可能...
摘要：如何讓一段文字居中，在人類看來如此簡單的問題，在界卻變成了多年令人頭疼的問題，關于居中的文字如汗牛充棟，但每到用時還是會有問題。關于垂直居中，中最基本的一個屬性就是，要了解，首先要了解基線，因為的缺省值就是。元素放置在父元素的基線上。 如何讓一段文字居中，在人類看來如此簡單的問題，在css界卻變成了多年令人頭疼的問題，關于居中的文字如汗牛充棟，但每到用時還是會有問題。單單一個『中』是什...
摘要：之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。 對于元素的水平居中，我根據我自己之前的一些學習來進行一些總結，如果有不對的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因為：表格的單元格的特別屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...
閱讀 3715·2021-10-18 13:34
閱讀 2406·2021-08-11 11:15
閱讀 1206·2019-08-30 15:44
閱讀 695·2019-08-26 10:32
閱讀 992·2019-08-26 10:13
閱讀 2067·2019-08-23 18:36
閱讀 1780·2019-08-23 18:35
閱讀 526·2019-08-23 17:10
