對哪些元素可以使用vertical-align
vertical-align用於對齊行內元素。所謂行內元素，即display屬性值為下列之一的元素：
inline
inline-block
inline-table （本文未涉及）
其中，行內元素（inline element）就是包含文字的標籤。
而行內塊元素（inline-block element），顧名思義，就是位於行內的塊元素。可以有寬度和高度（可以由其內容決定），也可以有內邊距、邊框和外邊距。
行內級元素會相互挨著排成行。如果一行排不下，就會在下方再建一行。所有行都會建立所謂的行盒子，行盒子裝著自己行中的所有內容。內容的高度不同，行盒子的高度也不同。在下面的示意圖中，行盒子的頂部和底部用紅色點線表示。
這些行盒子限定了我們可以影響的範圍。在行盒子內部，可以通過vertical-align來對齊個別元素。那麼，相對於什麼來對齊元素呢？
基線與外邊界
行內元素
這裡有三行文字緊挨著。紅線表示行高的頂邊和底邊，綠線表示字型高度，藍線表示基線。左邊這一行，行高與字型高度相同，因此上下方的紅色和綠線重疊在了一起。中間一行，行高是font-size的兩倍。右邊一行，行高為font-size的一半。
行內元素的外邊界與自己行高的上、下邊對齊。行高比font-size小不小並不重要。因此上圖中紅線同時也就表示外邊界。
行內元素的基線是字元恰好位於其上的那條線，也就是圖中的藍線。大致來說，基線總是穿過字型高度一半以下的某一點。
行內塊元素
從左到右：包含留內內容（「c」）的行內塊、包含流內內容且設定了溢位（overflow: hidden）的行內塊和未包含流內內容（但內容區有高度）的行內塊。紅線表示外邊距的邊界，黃色是邊框，綠色的內邊距，藍色是內容區，藍線是每個行內塊元素的基線。
行內塊元素的外邊界即其外邊距盒子的上、下兩邊，也就是圖中的紅線。
行內塊元素的基線取決於元素是否包含流內內容：
有流內內容的行內塊元素，基線就是正常流中最後內容元素的基線（左）。這個最後元素的基線是按照它自己的規則找到的。
有流內內容但overflow屬性值不是visible的行內塊元素，基線就是外邊距盒子的底邊（中）。也就是與行內塊元素的下外邊界重合。
沒有流內內容的行內塊元素，基線同樣是外邊距盒子的底邊（右）。
vertical align 樣式理解
文章參考 適用於 行內元素和單元格 table cell 元素 個人理解應用範圍 1 和 文字混排，使用vertical align屬性來定位 2 在table標籤中的td種使用vertical align屬性來定位 可以使用display table cell,注意該標籤父div一定是displa...
解析vertical align屬性
vertical align 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。即 1.只對行內元素起作用 若屬性中有display inline block 或float...
再次認識 vertical align
css中的基礎知識，上次在刷 segmentfault 遇見了乙個相關的問題有再次看過 vertical align 的描述。今天自己也遇見乙個類似的問題，再次深入學習一下。vertical align 用來指定行內元素 inline 或 單元格 table cell 元素的垂直對齊方式。無論當初起...