私は Twitter-bootstrap を使用していますが、クラス.btn-group
( link )を持つdiv
を中央に配置するのはかなり難しいことがわかりました。通常、私は使用します
margin: 0 auto;
または
text-align: center;
div内の要素を中央に配置しますが、内部要素にfloat: left
プロパティがあり、この場合は視覚効果に使用される場合は機能しません。
編集:これはBootstrap 3.の時点で変更されています。以下の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をテキストの中央揃えに設定します。インラインブロックを表示し、幅を継承するには、ボタングループも上書きする必要があります。
@Andres Ilichが言ったように、アンカー表示をinline-blockおよびfloat:noneに上書きすることもおそらく機能します。
Bootstrap 3の更新
Bootstrap 3の時点で、アラインメントクラスがあります( documentation を参照)。これで、単にtext-center
親へのクラス。そのようです:
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</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="#">»</a></li>
</ul>
</div>
こちらの実際の例をご覧ください: http://jsfiddle.net/EVmwe/409/
これは私のために動作します(ブートストラップ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>
または、「ページネーション中心」を追加します、例:
<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>
for bootstrap 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>
Twitter Bootstrap 3なので、回避策は必要ありません。text-align: center
は親要素です。
ボタンリンクをinline-block
ではなくfloat:left
として宣言するだけで、text-align:center
宣言は次のように機能します。
.btn-group a {
display:inline-block;
}
誰かが.btn-groupの幅も変更したい場合は、widthではなくmin-widthを実行できます。これは私がしました:
HTML:
<div class="text-center">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
</div>
</div>
CSS:
.btn-group {min-width: 90%;}
.btn {width: 50%;}
Btn-groupの幅をtext-centerの90%に設定し、含まれる各ボタンはボタングループの50%(text-center divの45%)です。
<div class="btn-group mx-auto" role="group">
<a href="#" class="btn btn-outline-primary"> Button 1</a>
<a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>
次のソリューションを使用しています。
<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>
Pタグでbtn-groupをスローし、p {}にtext-align:centerスタイルを使用します
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>
Bootstrap 3では、次の変更のように単純に構成する必要があります
<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;}
これは私にとっては大きな変化なく機能します。
これはBootstrap v3.3で私のためにトリックをしました
.btn-group {
margin: auto;
display: flex;
flex-direction: row;
justify-content: center;
}