Two ways to implement CSS icons and text alignment

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 Kind　　　　

Set the vertical alignment to middle for the IMG,

<p>                <span>1169</span>                <span>1168</span></p>

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

The second Kind

Set the small icon as the background image, 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 CSS icon and text alignment of the two implementation method is small to share all the content of the people, I hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.