网页icon和文本对齐神技 2016.03.23

时间 2019-12-10

标签网页 icon 文本对齐 2016.03.23 栏目 HTML 繁體版

原文原文链接

一直以来icon和文本须要对齐都使用vertical-align: middle;的方法，但兼容性不理想。参考了鑫旭大大的博客，终于收获不用vertical-align能够对齐的神技，原博点这里。
代码以下：css

<!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>