图标和文字对齐的方法

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

                                                                                              

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

第一种

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

1 2 3 4 5 6

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

 

 

1 2 3 4 5 6 7

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

 第二种

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

 

1 2 3 4

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

 

 

1 2 3 4 5 6 7 8 9 10 11 12

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

 

 

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

转载于:https://www.cnblogs.com/weibo806/p/5788040.html