[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没有效果 但私以为，是因为浮动和绝对定位的元素会脱离文档流的原因。