Maison > interface Web > tutoriel CSS > le corps du texte

Comment aligner les icônes CSS avec le texte

不言
Libérer: 2018-06-09 16:28:24
original
2973 Les gens l'ont consulté

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>
Copier après la connexion

p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}
Copier après la connexion
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>
Copier après la connexion

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;    
}
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal