如何?css表徵圖與文字對齊

下面為大家帶來一篇css表徵圖與文字對齊的兩種實現方法。內容挺不錯的，現在就分享給大家，也給的大家做個參考。

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

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

第一種　　　　

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

XML/HTML

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

XML/HTML

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

第二種

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

XML/HTML

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

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

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！