由于是相对字母 x 的下边缘对齐，而中文和部分英文字形的下边缘要低于字母 x 的下边缘，因 此，会给人感觉文字是明显偏下的，一般都会进行调整。
vertical-align属性值
（1）线类 middle ,top,bottom
（2）上下标 sub super
（3）文本类 text-top text-bottom
（4）数值类 10px 1em 20% -10px
vertical-align作用的前提
只能作用于内联元素以及display值为table-cell的元素
浮动和绝对定位会让元素块状话，因此不会支持Vertical-align
vertical-align的百分比值是相对于line-height计算的
text-align:justify 两端对齐需要的内容超过一行
一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible， 则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线
图标后跟文字https://demo.cssworld.cn/5/3-7.php
vertical-align:middle
内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。
table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。
vertical-align的上标和下标属性和html里的<sup>和<sub>的区别在于html元素会将内容设置为smaller
CSS进阶（七）vertical-align
原文地址：https://www.cnblogs.com/goOtter/p/9788832.html