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"><p><strong>Approche alternative</strong></p>
<p>Pour plus de personnalisation, pensez à éviter la classe icon-2x et à spécifier manuellement la taille de la police. Voici un exemple :</p>
<pre class="brush:php;toolbar:false"><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.