公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

css图标与文字对齐的两种实现方法

在平时写页面的过程中,常遇到要把小图标与文字对齐的情况。比如:

css图标与文字对齐的两种实现方法_www.uibq.com

总结了两种方法,代码量都比较少。

第一种    

对img设置竖直方向对齐为middle;

CSS代码:

div{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}

HTML代码:

<div>    
    <img src="" alt="" class="heart">    
    <span>1169</span>    
    <img src="" alt="" class="comment">    
    <span>1168</span>    
</div>

第二种

把小图标设为背景图片,调整padding

CSS代码:

.heart{    
    background:url(images/heart.png) left center no-repeat;    
    margin-right:20px;    
}    
.comment{    
    background:url(images/comment.png) left center no-repeat;    
}    
.heart,.comment{    
    height:30px;    
    line-height:30px;    
    padding-left:20px;    
}

HTML代码:

<div>    
    <span class="heart">1169</span>    
    <span class="comment">1168</span>    
</div>

以上就是所有方法,希望帮到大家!


原文:http://www.cnblogs.com/qjqcs/p/5303284.html

    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)