【css】实现图片与文本对齐

最新推荐文章于 2024-05-25 15:45:00 发布

richest_qi

最新推荐文章于 2024-05-25 15:45:00 发布

阅读量3.4k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107733048

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

要实现图片和文本对齐，可以使用下列几种方法。

第一种，使用vertical-align:middle

.icon{
	background-repeat:no-repeat;
	background-position:center;
    display:inline-block;
    width:16px;
    height:16px;   
    vertical-align:middle;  
}
.icon-down{
    background-image:url(./imgs/icon-chevron-down.png);
}
.icon-up{
    background-image:url(./imgs/icon-chevron-up.png);
}

<body>
    <div>请选择 <span class="icon icon-down"></span></div>
    <script>
        var span = document.querySelector('span');
        span.onclick = function(){
            if(span.classList.contains('icon-down')) {
                span.classList.remove('icon-down');
                span.classList.add('icon-up');
            }else if(span.classList.contains('icon-up')){
                span.classList.remove('icon-up');
                span.classList.add('icon-down');
            }
        }
    </script>
</body>

在这里插入图片描述

第二种，vertical-align:baseline + 容器与图片高度一致

/* div{
    line-height:32px;
}       */
.icon{
    background-repeat:no-repeat;
    background-position:center;
    display:inline-block;
    width:32px;
    height:32px;
    /* white-space:nowrap;
    text-indent:-999em; */
}
.icon-position{
    background-image:url(./imgs/icon-position.png);
}
.icon-position{
    background-image:url(./imgs/icon-position.png);
}

<body>
    <div><span class="icon icon-position">当前位置</span>杭州</div>
</body>

在这里插入图片描述

所以要实现图片文本对齐的css样式如下：

div{
    line-height:32px;
}      
.icon{
    background-repeat:no-repeat;
    background-position:center;
    display:inline-block;
    width:32px;
    height:32px;
    white-space:nowrap;
    text-indent:-999em;
}
.icon-position{
    background-image:url(./imgs/icon-position.png);
}

第三种，容器vertical-align:top + 图片position:absolute

<body>  
    <span class="icon-box"><i class="icon-delete"></i>删除</span>
</body>

.icon-delete{
    background:url(./imgs/delete.png) no-repeat center;
    display:inline-block;
    width:16px;height:16px;
}

在这里插入图片描述
所以，要实现图标文本对齐，css样式如下：

.icon-box{
    padding-left:16px;
    line-height:16px;
    vertical-align:top;
}
.icon-delete{
    background:url(./imgs/delete.png) no-repeat center;
    width:16px;height:16px;
    position:absolute;
    margin-left:-16px;
}

在这里插入图片描述
position:absolute会将元素块状化，相当于display:block，所以之前的display:inline-block是多余的，可以删除。

richest_qi

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【css】实现图片与文本对齐

要实现图片和文本对齐，可以使用下列几种方法。第一种，使用vertical-align:middle.icon{ background-repeat:no-repeat; background-position:center; display:inline-block; width:16px; height:16px; vertical-align:middle; }.icon-down{ background-image:url(./imgs/ic
复制链接

扫一扫

专栏目录