css:圖標與文字對齊的兩種方法

（好久沒寫博客了，這幾個月的積累比較零碎，記在本子上，現在開始整理歸類）

在平時寫頁面的過程中，常遇到要把小圖標與文字對齊的情況。比如：

                                                                                             

總結了兩種方法，代碼量都比較少。

第一種

　　　　對img設置豎直方向對齊為middle，

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

 

 

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

 第二種

　　　　把小圖標設為背景圖片，調整padding

 

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

 

 

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