ブートストラップ ボタンのテキストと Font-Awesome アイコンを垂直方向の中央に配置する方法

Font-Awesome アイコンを含むボタンのテキストの垂直方向の配置

大きな Font-Awesome アイコンをテキストの横のブートストラップ ボタンに組み込む場合、テキストがアイコンの下端に揃う傾向があり、視覚的にアンバランスになります。

解決策

テキストを垂直方向の中央に配置するには、テキストではなくアイコンの位置合わせに重点を置きます。これを実現する方法は次のとおりです。

• テキストの垂直方向の配置を変更しないでください。
• CSS を使用して、Font-Awesome アイコンの垂直方向の配置プロパティを「中」に設定します。 "

例コード

<div>
  <span class="icon icon-2x icon-camera"><p><strong>代替アプローチ</strong></p>
<p>さらにカスタマイズするには、icon-2x クラスを回避し、フォント サイズを手動で指定することを検討してください。以下に例を示します。</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;
}

結論

テキストの代わりに Font-Awesome アイコンの垂直方向の配置を調整することで、効果的に中央に配置できます。アイコンの横のボタンにテキストを縦方向に配置します。このアプローチにより、ボタンのコンテンツの外観を制御する際のカスタマイズ性と柔軟性が向上します。