css筆記——小圖標文字對齊中級解決方案

出處：http://www.zhangxinxu.com/study/201603/icon-text-vertical-align.html

css

.icon { 
    display: inline-block; 
    width:20px; height:20px; 
    background: url(delete.png) no-repeat center; 
    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'; 
}

html

<strong>情形1，空標簽</strong>
<p><i class="icon"></i> 刪除</p>
<strong>情形2，內部有文字</strong>
<p><a href="javascript:" class="icon">刪除</a> 後面的文字</p>

<p style="color:gray;">--------下麵是反例------</p>

<strong>設置了overflow:hidden</strong>
<p><i class="icon" style="overflow:hidden;"></i> 刪除</p>

效果圖1 小字型大小

2 大字型大小