Comment centrer verticalement le texte et les icônes de police dans les boutons Bootstrap ?

Alignement vertical du texte dans les boutons avec des icônes Font-Awesome

Lors de l'incorporation d'une grande icône Font-Awesome dans un bouton d'amorçage à côté du texte, le le texte a tendance à s'aligner sur le bord inférieur de l'icône, créant un effet visuellement déséquilibré. apparence.

Solution

Pour centrer verticalement le texte, concentrez-vous sur l'alignement de l'icône plutôt que sur le texte. Voici comment y parvenir :

• Évitez de modifier l'alignement vertical du texte.
• Utilisez CSS pour définir la propriété d'alignement vertical de l'icône Font-Awesome sur "milieu". "

Exemple Code

<div>
  <span class="icon icon-2x icon-camera">

Approche alternative

Pour plus de personnalisation, pensez à éviter la classe icon-2x et à spécifier manuellement la taille de la police. Voici un exemple :

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

Conclusion

En ajustant l'alignement vertical de l'icône Font-Awesome au lieu du texte, vous pouvez effectivement centrer le texte verticalement dans le bouton à côté de l’icône. Cette approche offre une plus grande personnalisation et une plus grande flexibilité dans le contrôle de l'apparence du contenu de votre bouton.

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!