網頁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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。