Home  >  Article  >  Web Front-end  >  Description of two implementation methods for aligning CSS icons and text

Description of two implementation methods for aligning CSS icons and text

高洛峰
高洛峰Original
2017-03-09 10:15:042173browse

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. Description of two implementation methods for aligning CSS icons and text

The first one

  Set the vertical alignment of img to middle,

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn