css 图标库-如何将 css 图标与文本对齐

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

下面给大家带来一篇关于css图标和文字对齐的两种实现方式的文章。 内容相当不错css 图标库，现在分享给大家，也给大家一个参考。

在编写页面的过程中css 图标库，经常需要将小图标与文字对齐。 例如：

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

首先

设置img的垂直对齐方式为中间，

XML/HTML

        
        1169
        
        1168

登录后复制

XML/HTML

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

登录后复制

第二

将小图标设置为背景图片并调整padding

XML/HTML

        1169
        1168

登录后复制

JavaScript

.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;    
}

登录后复制