display:inline-block的icon不垂直居中问题

需要了解知识点：

1、基线：基线并不是汉字的下端沿，而是英文字母x的下端沿；

2、行高指的是文本行的基线间的距离；





图片来源链接地址！

进入正题：

父元素设置line-height后，看似文本垂直居中对齐，而inline-block的icon并没有与文字对齐，如下图，因为默认的垂直对齐方式为vertical-align: baseline;这种对齐方式下，元素以基线为基准线对齐，及英文以X的下沿线与基线重合对齐，而inline-block元素以底边下沿线与基线重合对齐，所以会出现如图所示的icon偏上的情况；



解决方法设icon  vertical-align: middle;这种对齐方式下，元素以中线为基准线对齐，保险起见文本也设为 vertical-align: middle;结果如下图：