深入理解之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

该空白由行高内容的行高撑开，因为内联盒子默认为基线对，所以图片的底部文本的基线对齐，所以多出了文本内容基线以下的部分高度。

• 解决办法: 设置字体大小为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 元素为辅助元素，他的作用就是使图片的中心线和他的中心线对齐，而该元素设置为父元素的高度，所以就实现了垂直居中。