了解vertical-align

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

简单说来，vertical-align主要作用在行内元素盒子和表格单元盒子上。

因为经常会遇到行内元素与图片元素混排的情况，故拿这种情况进行举例，并加以说明，增进理解。

举个栗子

例如有如下HTML代码：

<style>
p {
  margin: 0;
  font-size: 16px;
  line-height: 16px;
}
p img {
  height: 36px;
}
</style>
<p>
  Hello Kitty, this is Jin, look,
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1398347788,1784750184&fm=27&gp=0.jpg" alt="">
  is my avatar.
</p>

执行以上代码将得到下面的结果：

image.png

分析结果，我们大致可以得到以下两个问题：

1. p标签的高度并不是被img撑开的高度36px，而是39px
2. img的底部并没有置于行块的底部

这里需要插入一个概念——基线（baseline），基线基线，顾名思义就是一条基础的水平线，正如纸质笔记本每一页上的一条条横线，它是作为一条参考线，用来保证文字在水平方向上能够整齐排列。

对于英文字母来说，基线存在于abcdefghijklmnopqrstuvwxyz中除gjpqy以外的其他字母的最底部。下图中红色的线则为基线。

image.png

vertical-align的默认值为baseline，并且由于大部分英文字母底部都达不到gjpqy拖长部分的位置，故而会产生3个像素的留白（这个依赖于不同用户代理，即浏览器的渲染机制）。

经过以上分析，便解释了之前的两个问题。

vertical-align

现在的代码将对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%; // 距离包含块顶部的百分比距离，仅在父元素设置有line-height时才会生效

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

上边的代码中，带text-前缀和不带text-前缀的区别就是，一个是基于文字对齐，一个是基于包含块（即最近父元素）对齐。

假如p标签仅仅只包含了文字，那么，它的高度则是line-height的高度，此时若在p中插入一个img元素，设置text-和不设置，就能够得到明显的区别，如下图所示，蓝色区块的高度则是取决于设置的line-height: 5px。

无图片 有图片且vertical-align为text-top 有图片且vertical-align为top

视觉差异

正是由于英文字母高度的不同以及基线的存在，往往在页面显示上会产生一些视觉差异，这也使得在用户体验上会造成一些困扰，例如下图：

image.png

很明显的，由于字母b上方的多出部分，看起来图片就像没有垂直居中对齐一样。

更令人讨厌的是，当汉字和英文字母混排时，会产生更恶心的现象，那就是图片仅仅只与英文字母的基线对齐，对我堂堂天朝上国的文字不能更不友好，于是就造成了下面的情况，看起来特别别扭：

图片vertical-align为baseline

还有这种情况：

图片vertical-align为middle

有解吗？正规渠道当然是无解，毕竟规则不是我大天朝来定，所以浏览器厂商也不会主动对汉字进行渲染优化。

hack方法也有很多，仁者见仁智者见智。

我常用的一种就是，给img添加上方的负外边距margin-top: -*px。见下图：

margin-top: -*px

这样做的好处是不会影响文字本身的line-height，缺点是图片上方超出的部分可能会对另外的元素造成遮挡。鱼与熊掌，就看如何进行取舍了。

最后

就行内元素还可以牵扯出很多布局方面的知识，vertical-align只是冰山一角，例如IFC（Inline Formatting Context）之类的，对于深入理解各种布局问题很有帮助。下面是一些参考文献：

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
https://www.w3.org/TR/CSS2/visuren.html#inline-formatting
https://segmentfault.com/a/1190000004466536