深入理解之vertical-align 深入理解之vertical-align

一、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; /* values */ vertical-align: 10em; vertical-align: 4px; /* 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

【深入理解之vertical-align】该空白由行高内容的行高撑开，因为内联盒子默认为基线对，所以图片的底部文本的基线对齐，所以多出了文本内容基线以下的部分高度。

解决办法: 设置字体大小为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; }