Home > Web Front-end > HTML Tutorial > css笔记--小图标文字对齐中级解决方案_html/css_WEB-ITnose

css笔记--小图标文字对齐中级解决方案_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:22:51
Original
1263 people have browsed it

出处: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'; }
Copy after login

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>
Copy after login

 

效果图1 小字号

  

 

2 大字号

 

  

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template