关于css设置文字与图标对齐的几种方式

解决方式一：

html在行内加小图标，经常使用的有两种方式，

方式一：用img标签实现图标展示

<img src="xx/xxx/xx.png">

方式二：使用字体文件实现的图标

<i class="iconfont icon-xxxx"></i>

两种方式的图标，在垂直方向上的距离会有偏差，

img标签的默认样式vertical-align: baseline;是与文字的baseline对齐，如果设置成vertical-align: middle；就会展示出如下图所示，图标和英文在一条水平线上，但是与汉字还是有位置偏移的问题，

 参考icon-font导出的图标，发现其导出的样式为：

.svg-icon{
  width:1em;
  height:1em;
  vertical-align:-0.15em;  
}

也就意味着该图标在baseline的基础上再向下便宜15%，那就可以在img标签上将vertical-align:-0.15em，且改变font-size也不会受影响，展示比较完美；

解决方式二：

分别把图片和文字放入不同的div中，并对div进行样式调整，代码如下

display:inline-block;
vertical-align:middle;