到做项目遇到这个问题，发现以下方法用起来，都不如另一种办法最好用。（背景图的方法也很好用）

    
             
     
    
          
      
       天使
      
     

嵌套就嵌套呗，重点是有用，这是关键，而且屡试不爽。

以上是6月16的更新。。。

以下是4月28的文字。。。

小图标和文字的居中对齐问题，相信大家在很多时候会遇到。今天楼主从其他大神那边扒了一些方法，现在做个小小的总结。

说明：本次用到的小图标来自阿里巴巴矢量图，大家可以去找一下（地址：http://www.iconfont.cn/plus/collections/detail?cid=3223）我的图标尺寸是20px*20px

第一种办法：vertical-align和line-height结合

特点：这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况。

效果图：

代码如下：

            
                                     
     
            
                  
      鲸鱼宝宝        
     
    

第二种办法：使用背景图去做

特点：兼容性非常好

效果图：

代码如下：

            
                                     
            鲸鱼宝宝        
    

上述代码的height和line-height可以去掉，这两个设置不是必须的。

更正:楼主错了，height和line-height千万不可以去掉！！！

看到的其他：

第三种办法：display:table+vertical-align

特点：不是所有的浏览器版本都支持display:table

效果图：

代码如下：

            
                                     
     
            
      
                
                       
       鲸鱼宝宝            
      
        
     
    

ps:配色可能有些奇怪，还请不要介意哈，哈哈哈哈！

第四种：position:absolute+transform: translate(0, -50%)

特点：没有办法的办法！

效果图：

代码如下：

            
                                     
     
            
                  
      鲸鱼宝宝        
     
    

ps：padding-left和margin-left是为了调试位置的，可能不够居中，不过没关系啦，这个不是重点。

好啦，这就是我今天一上午总结的成果，欢迎指正！马上就是五一啦，超级激动啊！！！