当前位置:Gxlcms > css > css图标与文字对齐的两种实现方法说明

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

时间:2021-07-01 10:21:17 帮助过:87人阅读

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

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

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

第一种    

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

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <span>1168</span>
</p>
p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}


第二种

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

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


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


以上这篇css图标与文字对齐的两种实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

以上就是css图标与文字对齐的两种实现方法说明的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行