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

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

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

说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址: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是为了调试位置的,可能不够居中,不过没关系啦,这个不是重点。

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

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