首页 > 代码库 > 小图标和文字的居中对齐-小总结

小图标和文字的居中对齐-小总结

2024-09-18 00:20:39   222人阅读

小图标和文字的居中对齐问题，相信大家在很多时候会遇到。今天楼主从其他大神那边扒了一些方法，现在做个小小的总结。

说明：本次用到的小图标来自阿里巴巴矢量图，大家可以去找一下（地址：http://www.iconfont.cn/plus/collections/detail?cid=3223）我的图标尺寸是20px*20px

第一种办法：vertical-align和line-height结合

特点：这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况。

效果图：

技术分享

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                height: 20px;
                line-height: 20px;
                box-sizing: border-box;
            }            
            img {
                vertical-align: middle;
                box-sizing: border-box;
            }
            span {
                vertical-align: middle;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="../img/whale.png" />
            <span>鲸鱼宝宝</span>
        </div>
    </body>
</html>

第二种办法：使用背景图去做

特点：兼容性非常好

效果图：

技术分享

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span {
                height: 40px;
                line-height: 40px;
                padding-left: 24px;
                box-sizing: border-box;
                background: url(../img/whale.png) left center no-repeat;
            }
        </style>
    </head>
    <body>
        <p>
            <span>鲸鱼宝宝</span>
        </p>
    </body>

</html>

上述代码的height和line-height可以去掉，这两个设置不是必须的。

看到的其他：

第三种办法：display:table+vertical-align

特点：不是所有的浏览器版本都支持display:table

效果图：

技术分享

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                background: lightcoral;
                color: #fff;
                height: 45px;
                width: 120px;
                border-radius: 5px;
                text-align: center;
                display: table;
                box-sizing: border-box;
            }
            .img_box {
                display: table-cell;
                vertical-align: middle;
            }
            
            img {
                vertical-align: text-top;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="img_box">
                <img src="../img/whale.png" />
                <span>鲸鱼宝宝</span>
            </div>
        </div>
    </body>

</html>

ps:配色可能有些奇怪，还请不要介意哈，哈哈哈哈！

第四种：position:absolute+transform: translate(0, -50%)

特点：没有办法的办法！

效果图：

技术分享

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                background: lightcoral;
                color: #fff;
                height: 45px;
                width: 120px;
                border-radius: 5px;
                position: relative
            }
            img,
            span {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
            }
            img {
                padding-left: 12px;
            }
            span {
                margin-left: 40px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../img/whale.png">
            <span>鲸鱼宝宝</span>
        </div>
    </body>
</html>

ps：padding-left和margin-left是为了调试位置的，可能不够居中，不过没关系啦，这个不是重点。

好啦，这就是我今天一上午总结的成果，欢迎指正！马上就是五一啦，超级激动啊！！！

小图标和文字的居中对齐-小总结


联系
我们