Heim >Web-Frontend >HTML-Tutorial >网页icon和文本对齐神技 2016.03.23_html/css_WEB-ITnose
网页icon和文本对齐神技 2016.03.23_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:17:071586Durchsuche
一直以来icon和文本需要对齐都使用vertical-align: middle;的方法，但兼容性不理想。参考了鑫旭大大的博客，终于收获不用vertical-align可以对齐的神技，原博点这里。
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>icon对齐神技</title> <style type="text/css"> a { text-decoration: none; color: #333; } /*全局统一lineheight,与icon高度一致*/ body { font-size: 14px; line-height: 20px; } .icon { display: inline-block; background: url('toplist.png') no-repeat 2px -139px; width: 20px; height: 20px; 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'; } </style></head><body> <p style="color:blue;">使用空标签i</p> <a href="#"><i class="icon"></i>某些东西</a> <p style="color:blue;">使用a标签，标签内有文字</p> <p ><a href="#" class="icon">某些东西</a>某些东西</p></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用CSS3伪类选择器美化按钮_html/css_WEB-ITnoseNächster Artikel：CSS HACK_html/css_WEB-ITnose