css中怎么实现图标与文字对齐

这期内容当中小编将会给大家带来有关CSS中怎么实现图标与文字对齐，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

第一种　　　　

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

XML/html Code复制内容到剪贴板

1. <div>    

2.         <img src="" alt="" class="heart">    

3.         <span>1169</span>    

4.         <img src="" alt="" class="comment">    

5.         <span>1168</span>    

6. </div>    

XML/HTML Code复制内容到剪贴板

1. div{    

2.      height:30px;    

3.      line-hight:30px;    

4. }    

5. .heart,.comment{    

6.         vertical-align:middle;    

7. }    

第二种

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

XML/HTML Code复制内容到剪贴板

1. <div>    

2.         <span class="heart">1169</span>    

3.         <span class="comment">1168</span>    

4. </div>    

javascript Code复制内容到剪贴板

1. .hear{    

2.         background:url(images/heart.png) left center no-repeat;    

3.         margin-right:20px;    

4. }    

5. .comment{    

6.         background:url(images/comment.png) left center no-repeat;    

7. }    

8. .hear,.comment{    

9.         height:30px;    

10.         line-height:30px;    

11.         padding-left:20px;    

12. }    

上述就是小编为大家分享的css中怎么实现图标与文字对齐了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网VUE频道。