小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