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

• 
  
  <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法

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

完美解决了这个问题。

赞一个