Description de deux méthodes d'implémentation pour aligner les icônes et le texte CSS

Dans le processus de rédaction de pages, nous rencontrons souvent la situation d'aligner de petites icônes avec du texte. Par exemple :

                                                                                       🎜> propose deux méthodes, qui nécessitent toutes deux moins de code.

Le premier type　　Définissez l'alignement vertical de l'image au milieu,

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

Le deuxième typeDéfinissez la petite icône comme image d'arrière-plan et ajustez le remplissage

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

Les deux méthodes ci-dessus pour aligner les icônes CSS et le texte sont tout le contenu partagé par l'éditeur, j'espère. cela peut vous donner une référence, et j'espère aussi que tout le monde soutiendra le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!