Wie kann man Text mit Font Awesome-Symbolen in Bootstrap-Schaltflächen vertikal zentrieren?

Vertikale Zentrierung von Text mit Font-Awesome-Symbolen

Manchmal kommt es beim Arbeiten mit Bootstrap-Schaltflächen, die sowohl Font-Awesome-Symbole als auch Text enthalten, zu einer Ausrichtung der Das vertikale Verfassen von Text mit dem Symbol kann sich als schwierig erweisen. Normalerweise wird der Text am unteren Rand des Symbols ausgerichtet, wie in diesem JSFiddle-Beispiel dargestellt.

Um diese Fehlausrichtung zu korrigieren, vermeiden Sie es, die vertikale Ausrichtung des Texts zu ändern. Passen Sie stattdessen die vertikale Ausrichtung des Font Awesome-Symbols an.

Inline-Styling-Lösung:

`

<i>

`

CSS-Klasse Lösung:

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.my-fancy-container {

...

}`

Alternativer Ansatz:

Eine Alternative zur Verwendung von icon-2x besteht darin, die Schriftgröße des Symbols manuell anzugeben, z wird im folgenden Code demonstriert snippet:

`

<span>

`

Dieser Ansatz bietet eine größere Flexibilität bei der Steuerung der Symbolgröße. Ein funktionierendes Beispiel finden Sie im aktualisierten JSFiddle.

Das obige ist der detaillierte Inhalt vonWie kann man Text mit Font Awesome-Symbolen in Bootstrap-Schaltflächen vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!