一、vertical-align介绍 MDN
- CSS属性指定内嵌或表格盒的垂直对齐
- 只对内联盒子和内联块级盒子起作用
- 一个内联盒子的默认基线为：
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
‘inline-block’的基线是正常流中最后一个line box的基线, 除非，这个line box里面既没有line boxes或者本身’overflow’属性的计算值而不是’visible’, 这种情况下基线是margin底边缘。
二、vertical-align属性
/* Keyword values */
vertical-align: baseline; //默认值
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <length> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%; //相对于行高
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
1、线性类属性 top middle bottom
- top / bottom
内联盒子的顶部与 行盒子(line-boxes) 的顶部对齐
内联盒子的底部与 行盒子 的底部对齐
- middle
将元素的中间与基线加上父元素的x高度的一半对齐，并非垂直对齐。
也就是元素会与X字符的一半高度对齐
image.png
2、文本类属性 text-top / text-bottom
内联盒子的顶部与行盒子的content area(内容区域)顶部/ 底部对齐
tips ! 有时候改变某个内联元素的vertical-align会改变父级元素的高度，或者出现的各种排版方式，记住vertical-align只会改变自身的垂直对齐方式,并不会影响其他元素的垂直位置。
三、vertical-align作用机制
1、图片的底部空白
image.png
该空白由行高内容的行高撑开，因为内联盒子默认为基线对，所以图片的底部文本的基线对齐，所以多出了文本内容基线以下的部分高度。
- 解决办法: 设置字体大小为0； 或者改变图片的vertical-align;
font {
font-size: 0;
}
// 或者
img {
vertical-align: bottom;
}
2、垂直居中对齐机制
vertical-align: middle;实现了近似的垂直居中;其实图片是X的一半高度位置对齐的，而X的一半高度处是不和父盒子的中心线对齐的。
image.png
- 实现垂直居中如下
p {
background: #ccc;
height: 240px;
}
p > i {
display: inline-block;
vertical-align: middle;
height: 100%;
}
p > img {
width: 200px;
vertical-align: middle;
}
image.png
i 元素为辅助元素，他的作用就是使图片的中心线和他的中心线对齐，而该元素设置为父元素的高度，所以就实现了垂直居中。
