CSS - Centre d'aligner le texte avec une icône
À l'aide du matériel d'icônes avec le CSS, j'ai le code suivant qui affiche un lien avec l'icône et le texte.
<a href="#"><i class="material-icons">group_work</i>Groups</a>
Comme vous pouvez le voir dans l'image ci-dessous, le texte semble se couler.. j'aimerais qu'elles soient alignés verticalement, centre d'ensemble. Comment puis-je y parvenir?
PS. (Pas un créateur!)
- essayez d'utiliser .matériel: des icônes, des .icône de texte { vertical-align: middle; } source:-github.com/google/material-design-icons/issues/121
- S'il vous plaît ajouter un un Minimum, Complètes et Vérifiables exemple de votre code
InformationsquelleAutor Vijay Chavda | 2016-10-11
Vous devez vous connecter pour publier un commentaire.
À la verticale du centre d'éléments, vous pouvez utiliser le
vertical-algin: middle;
règle. Dans votre cas, qui serait très probablement être:Voici un exemple avec votre bouton sombre:
CSS:
HTML:
HTML:
vertical-align
:moyenapplied to the icon
je " peut être l'option la plus simple, mais les résultats peuvent être contradictoires.J'ai trouvé de meilleurs résultats avec un réglage sur le lien pour
display:inline-flex
mais la dfference est assez subtile.vertical-align
peut encore être utilisé comme une solution de repli pour les non-soutenir les navigateurs.CSS:
HTML:
Fera l'affaire 😉