Wie zentriere ich Text und schriftartbeeindruckende Symbole in Bootstrap-Schaltflächen vertikal?

Vertikale Textausrichtung in Schaltflächen mit Font-Awesome-Symbolen

Beim Einfügen eines großen Font-Awesome-Symbols in eine Bootstrap-Schaltfläche neben dem Text wird die Der Text tendiert dazu, sich am unteren Rand des Symbols auszurichten, wodurch ein optisch unausgewogenes Erscheinungsbild entsteht Aussehen.

Lösung

Um den Text vertikal zu zentrieren, konzentrieren Sie sich auf die Ausrichtung des Symbols und nicht auf den Text. So erreichen Sie das:

• Vermeiden Sie es, die vertikale Ausrichtung des Textes zu ändern.
• Verwenden Sie CSS, um die vertikale Ausrichtungseigenschaft des Font-Awesome-Symbols auf „Mitte“ zu setzen. "

Beispiel Code

<div>
  <span class="icon icon-2x icon-camera"><p><strong>Alternativer Ansatz</strong></p>
<p>Für weitere Anpassungen sollten Sie erwägen, die Klasse icon-2x zu vermeiden und die Schriftgröße manuell anzugeben. Hier ist ein Beispiel:</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;
}

Fazit

Durch Anpassen der vertikalen Ausrichtung des Font-Awesome-Symbols anstelle des Textes können Sie das effektiv zentrieren Text vertikal in der Schaltfläche neben dem Symbol einfügen. Dieser Ansatz bietet eine größere Anpassungsfähigkeit und Flexibilität bei der Steuerung des Erscheinungsbilds des Inhalts Ihrer Schaltfläche.