Home >Web Front-end >CSS Tutorial >Description of two implementation methods for aligning CSS icons and text
In the process of writing pages, we often encounter the situation of aligning small icons with text. For example:
Summarizes the two methods, the amount of code is relatively Less.
The first oneSet the vertical alignment of img to middle,
<p> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt="" class="comment"> <span>1168</span> </p>
p{ height:30px; line-hight:30px; } .heart,.comment{ vertical-align:middle; }
##The second type
Set the small icon as the background image and adjust the padding
<p> <span class="heart">1169</span> <span class="comment">1168</span> </p>
.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; }
The above is the detailed content of Description of two implementation methods for aligning CSS icons and text. For more information, please follow other related articles on the PHP Chinese website!