起因

如今的网页设计，经常会使用图标字体，图标字体本质是字，而不是图，实践中我们经常把图标字体和普通文字合用，这时就存在一个新问题：图标字体与普通文字的需要垂直居中对齐。就比如：

Paste_Image.png

从人的视觉审美来看，这种垂直居中对齐是必要的。

vertical-align

关于文本对齐的理论，前辈们已经有研究，比如这篇深入理解 CSS 中的行高与基线，从中我们知道，行内如果有图片又有文字，那么图片跟文字默认是以基线对齐的，也就是下图：

Paste_Image.png

如果想让文字和图片垂直居中对齐，那么就要使用vertical-align: middle。

中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。（对于文字的处理有些偏差，具体依据还没有研究出来，有研究的同学可以联系我哦~~）

Paste_Image.png

可见本文作者也没有研究出来究竟怎样实现真正的水平居中对齐，因为你可以观察一下上图，红色的线并不是文字的严格上下居中位置，而是偏下。也就是说，从视觉上看，图片略有下沉，文字相对来讲更接近垂直居中。

由此得知，vertical-align: middle并不是完美的解决方案。那么怎么办呢？

虽然vertical-align: middle不能完美解决居中问题，但是它是实现垂直居中对齐的条件之一，剩下的工作就是在vertical-align: middle的基础上做修正即可。既然图片是下沉的，那么我就让图片往上挪一挪不就OK了么？

解决方案

事实上，任何行内垂直居中对齐有偏差的情况，都可以用给某个元素加margin-top: -1px（-1px也可能是-2px，根据情况而定）的方式来修正，这种修正的兼容性没任何问题。这种方案可以用于文字跟文字、文字跟图片、文字跟图标字体的垂直居中对齐。

案例

现在我使用了font-awesome字体库，设18号字体，然后与12px普通文字联合使用。

默认效果是基于基线对齐，当然不是我要的，于是我给font-awesome的<i class="fa fa-times"></i>（这是一个叉号的图标）设了vertical-align: middle，发现font-awesome字体比普通文字下沉了两个像素，于是再加上margin-top: -2px，问题完美解决。