web-dev-qa-db-ja.com

ボタン内のテキストとアイコンの垂直方向の配置

Bootstrapフレームワークの下にあるボタン内のテキストとフォントの素晴らしいアイコンを垂直に揃えるのに問題があります。行の高さの設定など、多くのことを試しましたが、何も機能していません。

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

これを機能させるにはどうすればよいですか？

twitter-bootstrapalignmentwebfontsfont-awesome
54
Shane

font-awesome.cssによって設定されるルールが1つあり、これをオーバーライドする必要があります。

インラインではなくCSSファイルでオーバーライドを設定する必要がありますが、基本的にicon-okクラスはデフォルトでvertical-align: baseline;に設定されており、ここで修正しました。

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

ここの例： http://jsfiddle.net/fPXFY/4/ およびその出力は次のとおりです。

enter image description here

このインスタンスの上記のアイコンのフォントサイズを30pxに縮小しました。ボタンのサイズに対して40pxで大きすぎると感じていますが、これは純粋に個人的な視点です。必要に応じて、ボタンのパディングを増やして補正することができます。

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

生成： http://jsfiddle.net/fPXFY/5/ 出力は次のとおりです。

enter image description here

90
nickhar

別の方法として、bootstrapを使用している場合は、align-middleを追加して要素を垂直方向に揃えることができます。

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">Continue
    <i class="icon-ok align-middle" style="font-size:40px;"></i>
</button>
5
Ali Kazai