小图标和文字垂直居中的解决方法

我们经常会遇到图标和文字不能对齐的情况。

<div class="box">
    <img class="icon" src="restart.png"/>
    <span class="text">垂直居中</span>
</div>

css：

.icon{display:inline block;width:18px;height:20px;}
.text{font-size:12px;}

结果是：

下面有3中方法可以解决这个问题：

1、浮动法，将文字和图片所在的块全部浮动。给文字加line-height

不要忘记清浮动

2、绝对定位法

3、vertical-align法

三种方法的最终结果都如下图，

完美解决了这个问题。