45

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

ここに画像の説明を入力

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

http://bootply.com/74652

4

10 に答える 10

3

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

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

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

于 2016-04-08T13:33:59.357 に答える
1

上記の方法はどれもそれ自体ではうまくいきませんでしたが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を参照してください。

于 2014-07-10T15:35:49.590 に答える
1

試着vertical-align: middle;_.glyphicon-th:before

于 2013-08-16T12:56:06.817 に答える
1

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

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

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

于 2015-05-17T18:06:25.057 に答える
0

特定のピクセルまたはパーセンテージの余白を追加します。私のアプリでは、これは領域の寸法に基づいて美しく機能しました。

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>
于 2015-10-22T07:12:47.483 に答える
0

他の方法

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>
于 2014-01-09T09:46:42.003 に答える
0 
<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

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

于 2013-08-16T13:04:58.767 に答える