Wie richtet man Text vertikal mit Font Awesome-Symbolen in Bootstrap-Schaltflächen aus?

Vertikale Ausrichtung von Text mit Font Awesome-Symbolen

Beim Kombinieren von Font Awesome-Symbolen und Text in Bootstrap-Schaltflächen kann die vertikale Ausrichtung des Textes eine Herausforderung sein . Normalerweise wird der Text am unteren Rand des Symbols ausgerichtet.

Um eine vertikale Textausrichtung zu erreichen, ändern Sie die vertikale Ausrichtung des Font Awesome-Symbols anstelle des Textes.

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

Alternativ: Sie können das Symbol und den Text in einzelne Bereiche aufteilen und sie mit CSS gezielt ansprechen:

<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;
}

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