【小技巧】小图标和文字的居中对齐-小总结

最新推荐文章于 2022-06-23 15:20:32 发布

weixin_34041003

最新推荐文章于 2022-06-23 15:20:32 发布

阅读量711

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winteronlyme/p/6781558.html

版权

到做项目遇到这个问题，发现以下方法用起来，都不如另一种办法最好用。（背景图的方法也很好用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            margin:100px 100px;
        }
        img{
            float: left;
            /*宽高根据UI图去写*/
            width: 10px;
            height: 10px;
        }
        .div{
            float: left;
            /*行高跟着图片的高度走，要一致*/
            line-height: 10px;
        }
        span{
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/sea.png" alt="">
    <div class="div"><span>天使</span></div>
</div>
</body>
</html>

嵌套就嵌套呗，重点是有用，这是关键，而且屡试不爽。

以上是6月16的更新。。。

以下是4月28的文字。。。

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

说明：本次用到的小图标来自阿里巴巴矢量图，大家可以去找一下（地址：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可以去掉，这两个设置不是必须的。

更正:楼主错了，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是为了调试位置的，可能不够居中，不过没关系啦，这个不是重点。

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

转载于:https://www.cnblogs.com/winteronlyme/p/6781558.html

weixin_34041003

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【小技巧】小图标和文字的居中对齐-小总结

到做项目遇到这个问题，发现以下方法用起来，都不如另一种办法最好用。（背景图的方法也很好用）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>...
复制链接

扫一扫