你的位置:首页 > 网页设计

[网页设计]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 ></i> 删除</p><strong>情形2,内部有文字</strong><p><a href="javascript:" >删除</a> 后面的文字</p><p >--------下面是反例------</p><strong>设置了overflow:hidden</strong><p><i ></i> 删除</p>

 

效果图1 小字号

  

 

2 大字号