1. vertical-align 屬性值概覽
vertical-align 僅對(duì)行內(nèi)元素(inline-block、inline)生效茅撞，塊元素?zé)o效，他是確定子元素的基線相對(duì)于父元素基線的位置（垂直方向上的對(duì)齊方式）巨朦，其屬性值有：
- baseline
- top
- bottom
- text-top
- text-bottom
- middle
- sub
- super
- 數(shù)字
2. 準(zhǔn)備
2.1 字體度量
首先米丘，我們先了解一下字體度量，如上圖所示糊啡。圖中小寫(xiě)字母 x 的底部為 baseline, x 的高度為 x-height拄查，ascender與大寫(xiě)字母的頂部有一定的間距，descender與小寫(xiě)字母 p, y 的底部對(duì)齊棚蓄，這些設(shè)置與字體的設(shè)置有關(guān)堕扶，具體的需要去了解字體是怎么做出來(lái)的，理解 vertical-align 的各個(gè)屬性的基礎(chǔ)是需要知道這些線的位置梭依。
2.2 line-box
每一行稱為一條Line Box稍算，它又是由這一行的許多inline-box組成，它的高度可以直接由line-height決定役拴，line boxes的高度垂直堆疊形成了containing box的高度糊探，就是我們見(jiàn)到的div或是p標(biāo)簽之類(lèi)的高度了。
3. vertical-align 各個(gè)屬性的表現(xiàn)一覽
下圖中第一排為文字內(nèi)容的表現(xiàn)河闰，第二排為圖片的表現(xiàn)科平，如果這個(gè)圖讓你一眼就看明白了各個(gè)屬性的具體表現(xiàn)，那么后續(xù)的內(nèi)容均可忽略姜性。黑色的外框是父元素內(nèi)容區(qū)域的邊界因?yàn)闆](méi)有設(shè)置 margin 和 padding匠抗，這個(gè)邊界也是line-box的邊界。
下圖中各個(gè)顏色的線的意義（從上到下數(shù)）：
- 藍(lán)色線（第一條）- ascender
- 綠色線（第二條）- x-height
- 紅色線（第三條）- middle
- 橙色線（第四條）- baseline
- 灰色線（第五條）- descender
4. vertical-align 各個(gè)屬性詳述
在父元素中寫(xiě)入 Xxjpf 作為參考污抬，并在此基礎(chǔ)上畫(huà)出5條參考線汞贸，父元素的 baseline 是 x 的底部的線條
4.1 baseline
對(duì)齊位置：子元素的 baseline 與父元素 baseline 對(duì)齊，即子元素中 x 的底部與父元素中 x 的底部對(duì)齊印机，圖片元素的 baseline 以及有寬度和高度的空盒子的baseline均為盒子底部矢腻。
如圖：
4.2 sub
對(duì)齊位置：子元素的 baseline(字母x 的底部)與父元素文字的 descender （灰線）對(duì)齊
如圖：
4.3 super
對(duì)齊位置：子元素的 baseline(字母x 的底部)與父元素文字的 x-height （綠線）對(duì)齊
如圖：
4.4 top
對(duì)齊位置：子元素盒模型的頂部，與 line-box 的頂部對(duì)齊射赛。
如圖：
4.5 middle
對(duì)齊位置：子元素盒模型的中線位置與父元素 基線(字母x 的底部)+ 半個(gè)x的高度的位置（紅線）對(duì)齊
圖例中多柑，為了方便查看，我們?cè)谧釉氐闹虚g畫(huà)了一條白色的線楣责，可以看到這條白線是與父元素穿過(guò) x 中心的紅線對(duì)齊竣灌。圖片上的黑色的線就是圖片的中間位置（是在ps上自己畫(huà)上去的）聂沙，也可以看到該黑線與穿過(guò) x 中心的紅線對(duì)齊。同時(shí)也可以看出 middle 與 baseline 的差別初嘹，文字內(nèi)容的差距比較小及汉，但圖片可以明顯看出是不一樣的。如圖：
4.6 bottom
對(duì)齊位置：子元素盒模型的底部屯烦，與 line-box 的底部對(duì)齊
如圖：
4.7 text-top
對(duì)齊位置：子元素盒模型的的頂部與父元素字體的 ascender 線（藍(lán)線）對(duì)齊
如圖：
4.8 text-bottom
對(duì)齊位置：子元素盒模型的的頂部與父元素字體的 descender 線（灰線）對(duì)齊
如圖：
4.9 數(shù)字
對(duì)齊位置：以 baseline 為中心線上下移動(dòng)指定像素量坷随，正數(shù)為向上移動(dòng)，負(fù)數(shù)為向下移動(dòng)
子元素 baseline 與父元素 baseline 對(duì)齊的前提下驻龟，正數(shù)（eg：2px）代表相對(duì)于baseline 位置上移指定的像素温眉，負(fù)數(shù)（-2px）代表相對(duì)于 baseline位置 下移指定的像素
5. 總結(jié)
vertical-align 只對(duì)行內(nèi)元素生效，
有些屬性需要找準(zhǔn)子元素的基線翁狐，如：baseline, sub, super
還有一些屬性需要確認(rèn)子元素的盒模型的范圍类溢，如：top, middle, bottom, text-top, text-bottom
| 屬性值 | 對(duì)齊位置 |
|---|---|
| baseline | 子元素的 baseline 與父元素 baseline 對(duì)齊 |
| sub | 子元素的 baseline 與父元素 x-heignt (綠線對(duì)齊) |
| super | 子元素的 baseline 與父元素 descender（灰線）對(duì)齊 |
| top | 子元素盒模型頂部與父元素 line-box 頂部對(duì)齊 |
| middle | 子元素盒模型的中線與父元素 baseline + 半個(gè) x 的高度位置（紅線）對(duì)齊 |
| bottom | 子元素盒模型底部與父元素 line-box 底部對(duì)齊 |
| text-top | 子元素盒模型的頂部與父元素 ascender 線（藍(lán)線）對(duì)齊 |
| text-bottom | 子元素盒模型的底部與父元素 descender 線（灰線）對(duì)齊 |
| 數(shù)字 | 以 baseline 為中心線上下移動(dòng)指定像素量，正數(shù)為向上移動(dòng)露懒，負(fù)數(shù)為向下移動(dòng) |
6. 思考
如果子元素的內(nèi)容有換行豌骏，如何確定baseline？
