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 大字号
感谢您的阅读,如果文中有任何技术上的错误或不妥,烦请留言指出,我会尽快更正。