Home > Article > Web Front-end > 网页icon和文本对齐神技 2016.03.23_html/css_WEB-ITnose
网页icon和文本对齐神技 2016.03.23_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:17:071530browse
一直以来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>
Statement：
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
Previous article：使用CSS3伪类选择器美化按钮_html/css_WEB-ITnoseNext article：CSS HACK_html/css_WEB-ITnose