ブートストラップ ボタンの Font Awesome アイコンでテキストを垂直方向に揃える方法

Font Awesome アイコンを使用したテキストの垂直方向の配置

Bootstrap ボタンで Font Awesome アイコンとテキストを組み合わせる場合、テキストを垂直方向に配置するのが難しい場合があります。通常、テキストはアイコンの下端に合わせて配置されます。

テキストを垂直方向に配置するには、テキストではなく Font Awesome アイコンの垂直方向の配置を変更します。

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

または、次のようにします。アイコンとテキストを個別のスパンに分割し、CSS でターゲットにすることができます:

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

以上がブートストラップ ボタンの Font Awesome アイコンでテキストを垂直方向に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。