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 one

　　Set the vertical alignment of img to middle,

<p>
        <img class="heart lazy"  src="/static/imghw/default1.png"  data-src="" alt="   alt="" >
        <span>1169</span>
        <img class="comment lazy"  src="/static/imghw/default1.png"  data-src="" alt="   alt="" >
        <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 two methods for realizing the alignment of css icons and text are all the content shared by the editor. I hope it can give you a reference. I also hope that everyone will support the PHP Chinese website.

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!