[toc] ## vertical-align屬性值分類 線類：baseline、top、middle、bottom 文本類：text-top、text-bottom 上標下標類：sub、super 數值百分比類：20px、2em、20%等 ### 數值百分類 數值百分比類其實是兩個類，數值類 和 百分比類。這里之所以把它們合在一起歸為一類，是因為它們的行為表現是一致的。 都是**相對于**基線往上或往下偏移。 **正值往上偏移，負值往下偏移。** 其中，百分比類的百分比是相對于`line-height`計算的。 ## vertical-align與基線 `vertical-align:baseline`等同于`vertical-align:0` 基線的定義是字母x的下邊緣 **但**對于**替換元素**，基線往往是元素本身的下邊緣。 ### inline-block與基線 設置為`inline-block`的元素的基線不同于上面的任何一個，它分分為兩種情況 當該`inline-block`元素里面**沒有內聯**元素，或則overflow不是visible，則該元素的基線就是其**margin**底邊緣；否則其基線就是元素里面最后一行內聯元素的基線。 ## vertical-align:top和bttom 分為兩種情況 - 內聯元素: 元素底部和當前行框盒子的頂部對齊 - table-cell元素: 元素底padding邊緣和表格行的頂部對齊 ## vertical-align:middle 也分為兩種情況  - 內聯元素: 元素的垂直中心點和行框盒子基線往上1/2x-height處對齊 - table-cell元素： 單元格填充盒子相對于外面的表格行居中對齊 ## vertical-align:text-top/text-bottom 盒子頂部和父級內容區域的頂部/底部對齊 ## vertical-align作用的前提 vertical-align其作用是有前提條件的，這個前提條件就是：只能應用于**內聯元素**以及display值為**table-cell**的元素 具體為 display計算值為inline、inline-block、inline-table、table-cell 注意：即使是替換元素也是有效的（不像`line-height`） ### 浮動和絕對定位會讓元素塊狀化 浮動和絕對定位會讓元素塊狀化，意思是會改變它的display值，從而導致vertical-align沒有效果 但私以為，是因為浮動和絕對定位的元素會脫離文檔流的原因。