小icon与后面文字对齐

由于

vertical-align

属性的兼容性，以及

vertical-align:middle

并不是严格意义的垂直居中，因此，小图标+文字的对齐，基本上都要针对不同浏览器加个hack补丁；在加上，如果你的图标尺寸一会儿16像素，一会儿18像素，显然，没法通过全局一个设置使得整站的小图标和文字都对齐良好！

我们要想20像素高的图标和20像素高的文字天然对齐显示，需要满足这两个条件：

1. overflow

   属性值除了

   visible

   都不行；
2. 里面需要有不加修饰的文本内容；

所以，下面两种情况都是淘汰的！

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: ...
    overflow: hidden;     
        
  
               

}      

<i class="icon"></i>     
        
  
             


.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: ...
}      

第一种情况是

overflow:hidden

拖后腿了；第二种情况是

<i>

标签里面是空大屁，基线还是元素底边缘而不是里面的文字（如果有）。

.icon { 
    display: inline-block; 
    width:20px; height:20px; 
    background: ...; 
    white-space:nowrap; 
    letter-spacing: -1em; 
    text-indent: -99em; 
    color: transparent;
    /* IE7 */
    *text-indent: 0;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');
}
.icon:before {
    /* 伪元素插入空格文本 */
    content: '\3000'; 
}      

您可以狠狠地点击这里： 小图标文字对齐的终极解决方案demo

转载自：张旭鑫的http://www.zhangxinxu.com/wordpress/?p=5264