实现icon和文字垂直居中的两种方法－（vertical-align and line-height）

方法一：vertical-align

在w3school定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

百思不得骑姐

然后Google，反正在w3schools上面并没有找到定义

只能写代码测试

而后个人理解，才作出如此解释》

该属性作用的对象：行内元素（inline，inline-block也有行内属性） 其他table-cell 

常用属性值：top middle bottom

个人理解

个人认为，一般情况下，这些字母自发“坐落”的这条线就是基线。然后两行之间距离就是line-height(一会用到的第二种方式) ，至于设置top middle bottom后基线怎么对齐，解释不清楚。

测试top middle bottom效果是这样的

方法2:使用line-height

在块元素内，设置line-height和height一致,可使行内元素垂直居中，注意这里使用行高的单位最直接的方式是使用px，如果使用的是百分比，比如使用150%，那么150%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。如果使用1.5，则是根据子元素自己字体的大小去乘以1.5来计算行高。另，1.5em等也是按照150%的情况来算的。

两种方法效果见点我看效果