Bootstrap2でdivを中央に配置する方法は？

http://twitter.github.com/bootstrap/scaffolding.html

私はすべての組み合わせのように試しました：

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

または

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

変更されたスパンとオフセット番号..

しかし、ページの中央に完全に配置された単純なボックスを取得することはできません:(

中央に6列幅のボックスが欲しいだけです...

でやった

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

しかし、ボックスが広すぎるので、span7でそれを行う方法はありますか？

span7 offset2左側にspan7 offset3余分なパディングを与え、右側に余分なパディングを与えます。

そのようにスパンサイズを減らすことによって、あなたが希望のサイズにdiv要素自体を縮小以外にも... class="span6 offset3"、class="span4 offset4"など...のような単純なように、何かstyle="text-align: center"のdivには、あなたが探している効果を持つことができます

オフセットを設定してspan7を使用し、スパンをページの中央に配置することはできません（合計スパン= 12のため）

ブートストラップのスパンは左に浮かんでいます。それらを中央に配置するために必要なのは、この動作をオーバーライドすることだけです。これをスタイルシートに追加して行います。

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

このクラスを定義している場合は、それをスパンに追加するだけで準備完了です。

<div class="span7 center"> box </div>

このカスタムセンタークラスは、ブートストラップcssの後に定義する必要があることに注意してください。使用できます!importantが、お勧めしません。

Bootstrap3には、.center-block使用できるクラスがあります。それは次のように定義されています

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ドキュメントはこちら。

フルブートストラップ（自動の左/右の方法ではない）を実行する場合は、12列に収まるパターンが必要です（例：2つの空白、8つのコンテンツ、2つの空白）。それがこのセットアップが行うことです。それは-md-バリアントのみをカバーします、私はcol-xs-12を追加することによってそれを小さいためにフルサイズにスナップする傾向があります

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

単一のコンテナを中央揃えにしたかったようです。ブートストラップフレームワークは、その1つの例を複雑にしすぎている可能性があります。たとえば、次のような独自のスタイルを持つスタンドアロンのdivがあった可能性があります。

<div class="login-container">
  <!-- Your Login Form -->
</div>

とスタイル：

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

ブートストラップ.containerdiv内のどこかにネストされている場合は、これで問題なく機能するはずです。

クラスcentercontentsを追加します

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

@ZuhaibAliコードは私にとっては一種の作業ですが、少し変更しました：

cssで新しいクラスを作成しました

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

その後、divは

<div class="center col-md-6"></div>

div自体の幅にcol-md-6を追加しました。これは、この状況ではdivが半分のサイズであることを意味し、ブートストラップには1〜12のcolmdがあります。

このガイダンスに従ってくださいhttps://getbootstrap.com/docs/3.3/css/

使用する .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

divをクラスを持つ親divでラップしてから、divにrowスタイルmargin:0 auto;を追加します

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>