How to implement CSS icons to align with text

Here are two ways to achieve a CSS icon and text alignment. Content is very good, and now share to everyone, but also for everyone to make a reference.

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,

Xml/html

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

Xml/html

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

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

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!