How to align css icons with text

The following will bring you two implementation methods of aligning CSS icons and text. The content is quite good, so I would like to share it with you now and give it as a reference for everyone.

In the process of writing pages, we often encounter the situation of aligning small icons with text. For example:

了 Summarized two methods, and the code volume was relatively small.

The first one　　

Set the vertical alignment of img to middle,

XML/HTML

<p>
        <img class="heart lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt="" >
        <span>1169</span>
        <img class="comment lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt="" >
        <span>1168</span>
</p>

XML/HTML

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

Second type

Set the small icon as the background image and adjust 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 entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS to remove the select drop-down arrow

The above is the detailed content of How to align css icons with text. For more information, please follow other related articles on the PHP Chinese website!