web-dev-qa-db-ja.com

センターTwitter Bootstrap 3つのボタンのグリフィコン

現在、Twitter Bootstrap 3 RC2とTwitter Bootstrapは別のリポジトリに移動しました。テキスト付きのボタンで使用すると、アイコンはうまく中央に配置されていません。

enter image description here

アイコンとテキストの一番下の行は同じですが、見栄えの良いボタンの場合、アイコンはテキストに基づいて中央に配置する必要があると思います。これを達成する方法はありますか？

http://bootply.com/74652

csstwitter-bootstrapglyphicons
44
Mahoni

グリフィコンで<span>からテキストを移動し、vertical-align: middle;を<span>に適用します

  <button class="btn btn-default">
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
  </button>

デモ （

これは、Bootstrap 4のようにFont Awesomeアイコンで動作します

<button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>
57
Russ Cam

.glyphicon-thにvertical-align: -{N}px;スタイルを適用して、Nピクセル上下にシフトします。

27
kumarharsh

一部の垂直方向の配置では、位置合わせのために機能しない場合があります：.glyphiconクラスを調べると、それが相対に設定されていることがわかります。たとえば、「継承」に設定してみてください：

.glyphicon.v-centered {
    position: inherit;
    vertical-align: middle;
}

これは、ボタンにないアイコンでも機能するはずです。タブ。

3
Vilius

問題：グリフアイコンがボタンテキストの上に2ピクセル高すぎました。ここの例を使用して、次のように修正しました。ありがとう（Alastair Maw）。

私は次のように私のものを動かすことができました：

HTML

<div class="col-xs-12">
    <a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-Ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
        <span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
    </a>
</div>

CSS

#panelTopic  .glyph_Credit {
    vertical-align: middle;
    display: inline-block;
    padding-bottom:6px;
}
1
Valkerie Silk

vertical-align: middle; オン .glyphicon-th:before

1
Mihai Alex

私はこのようにそれをすることができました：

.glyphicon.center:before {
    vertical-align: middle;
}

<span class="glyphicon center glyphicon-th"></span>を使用します。

1
Timo Türschmann

上記の方法はどれも単独ではうまくいきませんでしたが、display: inline-block; vertical-align: middle要素でした。それはinline-blockそれが鍵のようです。

.vcenter * {
    vertical-align: middle;
    display: inline-block;
}

.btn i {
    margin-left: 10px;
    font-size: 20px;
}

と

<div class="vcenter">
  <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>

ライブの例については、 http://www.bootply.com/UbY78zM8pD を参照してください。

1
Alastair Maw

他の方法

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>
0
Shalini

特定のピクセルまたはパーセンテージのマージンを追加します。私のアプリでは、エリアの大きさに基づいて、これがうまく機能しました。

CSS：

.someWrapperClass button span {
    margin-top: 120%;
}

HTML：

<div class="someWrapperClass">
    <button type="button" ng-click="SomeMethod()">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </button>
</div>
0
Will Strohl
<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

要件に応じてフォントサイズを増減してください

0
rajeshpanwar