twitter-bootstrapから.btn-groupを集中させるにはどうすればいいですか？

Question

私はtwitter-bootstrapを使用していますが、（link）のクラスを持つdivを中心に置くのはかなり困難でした。 通常、私はdivの内、中心のものへ

margin: 0 auto; 

または

text-align: center; 

を使用しますが、内側の要素が、この場合、視覚効果のために使用するプロパティfloat: leftを持っているとき、それは動作しません。

http://jsfiddle.net/EVmwe/1

Answer 1

編集：これは、よう変更されましたBootstrap 3の解決策を参照してください。

質問からラッピングdivを追加していますか？この例で

ルック：コードのhttp://jsfiddle.net/EVmwe/4/

重要な部分：

/* a wrapper for the paginatior */ 
.btn-group-wrap { 
    text-align: center; 
} 

div.btn-group { 
    margin: 0 auto; 
    text-align: center; 
    width: inherit; 
    display: inline-block; 
} 

a { 
    float: left; 
} 

分割内のボタン群をラッピングし、中央揃えをテキストにDIVを設定します。また、インラインブロックと継承幅を表示するには、ボタングループを上書きする必要があります。

インラインブロックにアンカーディスプレイを上書きし、float：noneも@Andres Ilichが述べたように、おそらくうまくいくでしょう。 （documentationに見られるように）ブートストラップ3のブートストラップ3

ため

---

更新、あなたはアライメントのクラスを持っています。今度は、text-centerクラスを親に追加するだけです。これと同じように：

<div class="text-center"> 
    <ul class="pagination"> 
     <li class="disabled"><a href="#">&laquo;</a></li> 
     <li class="active"><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
     <li><a href="#">5</a></li> 
     <li><a href="#">&raquo;</a></li> 
    </ul> 
</div> 

ここで働くの例を参照してください：http://jsfiddle.net/EVmwe/409/

Answer 2

は、だけではなく、float:leftのinline-blockとしてあなたのボタンのリンクを宣言し、あなたのtext-align:center宣言はそうのように、動作します：

は

.btn-group a { 
    display:inline-block; 
} 

デモ：http://jsfiddle.net/EVmwe/3/

Answer 3

または "改ページ中心"、例を追加：Twitterのブートストラップ3以来

<div class="btn-toolbar pagination-centered"> 
    <div class="btn-group"> 
    <a href=1 class="btn btn-small">1</a> 
    <a href=1 class="btn btn-small">2</a> 
    <a href=1 class="btn btn-small">3</a> 
    </div> 
</div> 

Answer 4

を任意の回避策の必要はありません。親要素にtext-align: centerと指定してください。

Answer 5

これは、（ブートストラップ3）私の作品：

<div class="text-center"> 
    <div class="btn-group"> 
     <a href=1 class="btn btn-small">1</a> 
     <a href=1 class="btn btn-small">2</a> 
     <a href=1 class="btn btn-small">3</a> 
    </div> 
</div> 

Answer 6

誰も.btnグループの幅を変更したい場合は、あなたではなく幅よりも最小幅を行うことができます。私はこれをした：

HTML：

<div class="text-center"> 
<div class="btn-group"> 
    <button class="btn">1</button> 
    <button class="btn">2</button> 
</div> 
</div> 

CSS：テキスト・センターの90％にBTN-グループの幅を設定し、各ボタンは、ボタンの50％である含ま

.btn-group {min-width: 90%;} 
.btn {width: 50%;} 

グループ（テキストセンター部門の45％）。

ブートストラップ3では

Answer 7

、あなただけの変更

<div class="btn-toolbar"> 
     <div class="btn-group"> 
      <button onclick="#" type="button" class="btn btn-default btn-sm"> 
       Click 1          
      </button>   
      <button onclick="#" type="button" class="btn btn-default btn-sm"> 
       Click 2 
      </button> 
      <button onclick="#" class="btn btn-default btn-sm" type="button">            
       Click 3 
      </button> 
      <button onclick="#" type="button" class="btn btn-default btn-sm"> 
       Click 4 
      </button> 
      <button onclick="#" type="button" class="btn btn-default btn-sm"> 
       Click 5 
      </button> 
      <button onclick="#" type="button" class="btn btn-default btn-sm"> 
       Click 6 
      </button> 
     </div> 
    </div 

を、次のような単純な構造と、あなたは余裕またはテキストセンターによって強制することはできませんように、これだけ（ブートストラップを無効に）左フロートを強制されたスタイルを修正する必要があります：

.btn-toolbar .btn-group {float:initial;} 

これは大きな変更なしで動作します。

Answer 8

私は次の解決策を使用しています。

<div class="center-block" style="max-width:400px"> 
    <a href="#" class="btn btn-success">Accept</a> 
    <a href="#" class="btn btn-danger"> Reject</a> 
</div> 

Answer 9

APタグにBTN基をスローおよびテキスト整列使用：Pセンタースタイルを{}

p { 
    text-align: center; 
    } 

    <p> 
    <div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button> 
    </div> 
    </p> 

Answer 10

ブートストラップ4

<div class="text-center"> 
    <div class="btn-group"> 
     <a href="#" class="btn btn-primary">text 1</a> 
     <a href="#" class="btn btn-outline-primary">text 2</a> 
    </div> 
</div>