1. ホーム
  2. html

twitter-bootstrapの.btn-groupを中央に配置する方法は?

2023-09-28 02:44:17

質問

私は twitter-bootstrap を使っているのですが、中央揃えにするのがかなり難しいことがわかりました。 div というクラスがあり .btn-group ( リンク ). 通常、私は

margin: 0 auto; 

または

text-align: center;

を使うと div 内のものを中央に配置することができますが、内側の要素に float: left というプロパティがある場合は動作しません。

http://jsfiddle.net/EVmwe/1

どのように解決するのですか?

編集しました。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で囲み、divをtext-align centerに設定します。また、ボタングループはdisplay inline-block、widthを継承するように上書きする必要があります。

アンカーの display を inline-block に、float: none を上書きすることも、おそらく @Andres Ilich が言ったようにうまくいくでしょう。


Bootstrap 3 用のアップデート

Bootstrap 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/