共计 2422 个字符，预计需要花费 7 分钟才能阅读完成。
前言
为什么写这篇总结？最近在文字图标垂直对齐上用到 css 的 vertical-align 属性，但是有的时候有效，有的时候无效，常常疑惑不解，反思这是自己对 vertical-align 的基本认知不够造成的。所以想在自己理清问题前因后果的同时，加深对 vertical-align 的理解，产出如下笔记。
vertical-align 是自 css1 就存在的属性，该属性定义行内元素（也就是 display 值为 inline 和 inline-block 的元素）、表格元素（table-cell）以及 ::first-letter、::first-line 选择的元素的基线相对于该元素所在行（line-box）的垂直对齐。
行内元素：a, span, b, i, button, input, label, select, textarea 等
表格元素：display 为 table-cell 的元素 一般指 td
其他：::first-letter、::first-line
取值
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
注释：根据 MDN 说明，取值可分为三大类
-
相对父元素的值（使设置该属性的元素相对其父元素垂直对其）
- baseline 默认值，元素的基线相对于父元素的基线对齐
- sub 元素的基线与父元素的下标基线对齐
- super 元素的基线与父元素的上标基线对齐
- text-top 元素的顶部与父元素的文字顶部对齐
- text-bottom 元素的底部与父元素的文字底部对齐
- middle 元素的 中部 与父元素的基线 + 父元素 x -height/2（父元素字母 x 的高度的一半）对齐
- <length> 元素基线对齐到父元素基线上方的指定位置, 可取负值
-
<percentage> 元素基线对齐到父元素基线上方的对应百分比位置。该百分比相对于父元素的 line-height, 可取负值
查看代码
注：<length>,<percentage> 取负值越多时距离上顶端越远，和 margin 取值相反
没有基线的元素，使用外边距的下边缘替代。-
相对行 (line-box) 的值（使设置该属性的元素相对整行垂直对齐）
- top 使元素及其后代元素的顶部与整行的顶部对齐
- bottom 使元素及其后代元素的底部与整行的底部对齐
-
表格单元格的值
- baseline(以及 sub, super, text-top, text-bottom, <length>, <percentage>) 使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐
- top 使单元格内边距的上边沿与该行顶部对齐
- middle 使单元格内边距盒模型在该行内居中对齐
- bottom 使单元格内边距的下边缘与该行的底部对齐
baseline
baseline 基线，字母 'x' 的下边沿线
查看代码
盒模型的上下边界 与 baseline
查看代码
如图：
绿色：行高的上下边界
红色：文本的上下边界
蓝色：baseline 位置
左、中、右分别为行高 1、2、0.5 的表现，行高为 1 时，文本边界与行高边界重合。内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度，不会受影响，但 top, bottom 会对齐文本边界。
inline-block 元素的基线
查看代码
图中左、中、右都是 inline-block 元素，左图 inline-block 元素内部存在未脱离文档流的文本 x，中图在左图包含文本基础上添加 overflow:hidden，右图不包含任何文本。红线表示 margin-box 边界，蓝线表示 baseline，黄色为 border，白色为 padding 区域，绿色为 content 区域。
可见 inline-block 元素的外边缘就是 margin-box 的边缘、inline-block 元素的 baseline 的位置要看该元素有没有处于正常流的内容以及元素的 overflow 属性值是不是 visible。
baseline 的确定规则
1、inline-table 元素的 baseline 是它的 table 第一行的 baseline。
2、父元素 line-box 的 baseline 是最后一个 inline-box 的 baseline。
3、inline-block 元素的 baseline 确定规则
- 如果内部有 line-box，则 inline-block 元素的 baseline 就是最后一个作为内容存在的元素的 baseline，而这个元素的 baseline 的确定就要根据它自身来定了。
- 如果其内部没有 line-box 或它的 overflow 属性不是 visible，那么 baseline 将是这个 inline-block 元素的底 margin 边界。
icon 与文本对齐
上图左为 icon 设置 vertical-align: middle 没有生效，很明显图标和文字没有对齐。标注参考线后
查看代码
原因在于左边文字 vertical-align 使用默认值 baseline。而 vertical-align:middle 对应元素中部对齐于 baseline 加上半个 x 的距离 (half of the x-height)，文本会高出 icon 一段距离。
有图中，文字与 icon 都对齐于一个中点，line-box 的行高增加，baseline 位置不变，文字的 baseline 稍微下移，位于 line-box 的 baseline 的下方。此时文本与图标对齐。
总结：查阅很多资料，算把 vertical-align 理解了。其中还有一些深入的知识点没有记录，下面会贴上参考资料。
写这篇笔记同时也解决了我之前的对 inline-block 元素间存在间隙的疑问以及对应的解决方案，点此进入。
总之 收获多多 (• ̀ω•́)✧
参考资料：
深入理解 css 中 vertical-align 属性
关于 Vertical-Align 你需要知道的事情 [原] [译]
深入理解 css 之 vertical-align
MDN vertical-align
