Bootstrap2 で div を中央に配置するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/9382970

質問

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であるため）

他のヒント

Bootstrap のスパンは左側にフローティングされます。それらを中央に配置するには、この動作をオーバーライドするだけです。これをスタイルシートに追加することでこれを行います。

.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) */
}

ブートストラップ内のどこかにネストされている場合、これはうまく機能するはずです .container 部

クラスセンターコンテンツを追加する

/** 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のcol mdがあることを意味します。

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

使用 .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top