【学习笔记】CSS深入理解之vertical-align
vertical-align的值
- 线类：baseline（默认）, top, bottom, middle
- 文字类：text-top, text-bottom
- 上标下标类：sub, super
- 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值
- 百分比：相对于line-height计算
vertical-align起作用的前提
只作用于inline水平元素以及'table-cell'元素
注意：float和position: absolute会使元素块状化
vertical-align与line-height
inline元素都有vertical-align和line-height，默认基线对齐
inline元素对齐
https://codepen.io/curlywater...
上例中，inline元素默认基线对齐，并未和容器贴合；
设置vertical-align为top，这时不再与基线对齐，和容器贴合；
设置line-height为0，但基线与底边重合，仍旧是基线对齐，此时元素和容器贴合。
对齐方式总结：
清除vertical-align
- 修改vertical-align值
- 元素block化
line-height为0
- 设置line-height为0
- line-height为数值的情况下，可以设置font-size为0
inline-block基线
inline-block元素的基线是inline-block内最后一个line box的基线；如果inline-block内没有line box或者其本身的overflow不为visible，基线是自身的margin底边缘。https://codepen.io/curlywater...
上例中，左边盒子的基线为其底边缘，右边盒子的基线为line box的基线；
将右边盒子的行高设置为0，即baseline这个line box的高度为0，位置处于content area中间。
线类属性值
bottom
inline|inline-block元素：元素底部和父级底部对齐
table-cell元素：底padding边缘和table-row底部对齐，多余部分padding填充
top
inline|inline-block元素：元素顶部和父级顶部对齐
table-cell元素：顶padding边缘和table-row顶部对齐，多余部分padding填充
middle
inline|inline-block元素：元素的垂直中心点和父元素基线上的1/2 x 高度处对齐，也就是x的中心点
使用vertical-align:middle只是近似垂直居中，因字符有下沉的特性，所以x的中心点是低于容器实际中心线的，字体较小的情况下肉眼看不出区别而已
https://codepen.io/curlywater...
table-cell元素：table-cell元素的高度有table-row中最高的那一个单元格决定，内容未撑满高度时，使用padding填充
文本类属性值
text-top：元素顶部和父级content area的顶部对齐text-bottom：元素底部和父级content area的底部对齐
只与父级的font-size有关，与父级line-height无关，与兄弟元素的line-height无关
上标下标类属性值
super：提高元素的基线到父级的上标基线位置sub：降低元素的基线到父级的下标基线位置
相邻元素不同vertical-align的行为表现
关注自身和父级，前后元素并没有影响
vertical-align的应用
多行文字垂直居中
https://codepen.io/curlywater...
- 容器指定高度
- 需要居中的行内元素设置
display: inline-block; vertical-align: middle - 加一个与容器高度相同，
vertical-align: middle; display: inline-block辅助元素