(Long time no blog, the accumulation of these months is more fragmented, recorded in the book, and now began to organize classification)
In the normal process of writing a page, often encountered in order to put small icons and text to align the situation. Like what:
Summed up two methods, the code is relatively small amount.
First KindSet the vertical alignment to middle for the img,
<div> <span>1169</span> <span>1168</span></div>
div{ height:30px; line-hight:30px;}.heart,.comment{ Vertical-align:middle;}
The second Kind
Set the small icon as the background image, adjust the 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;}
CSS: Two ways to align icons with text