Comment aligner les icônes CSS avec le texte

Ce qui suit vous présentera deux méthodes pour aligner les icônes CSS et le texte. Le contenu est assez bon, j'aimerais donc le partager avec vous maintenant et le donner comme référence pour tout le monde.

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

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

Le premier type

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

XML/HTML

XML/HTML

<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 type

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

XML/HTML

JavaScript

<p>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</p>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

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

Recommandations associées :

Comment utiliser CSS pour supprimer la flèche déroulante de sélection

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!