web-dev-qa-db-ja.com

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は右に余分なパディングを与えます...

csstwitter-bootstraptwitter-bootstrap-2
84
Alex

このようにスパンサイズを小さくすることで、div自体を希望のサイズに縮小するだけでなく、class="span6 offset3"、class="span4 offset4"など... divに対するstyle="text-align: center"のような単純なものでも、探している効果を得ることができます。

あなたはどんなオフセットを設定してspan7を使用することはできませんし、ページの中央にスパンを取得することができます（総スパン= 12のため）。

45
csturtz

ブートストラップのスパンは左側に浮かんでいます。それらを中心に置くために必要なのは、この動作を上書きすることだけです。これを私のスタイルシートに追加することでこれを行います。

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

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

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

このカスタムセンタークラスは、 - bootstrap cssの後に定義する必要があります。 !importantを使うこともできますが、それはお勧めできません。

165
Zuhaib Ali

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

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

ドキュメンテーション ここ 。

35
Casey

フルブートストラップにしたい場合（そして自動左/右方向ではありません）、12桁以内に収まるようなパターンが必要です。 2つのブランク、8つのコンテンツ、2つのブランク。それが、このセットアップが行うことです。これは- md -の変種のみをカバーしています。col-xs-12を追加することで小さいサイズでフルサイズにすることができます。

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

単一のコンテナを中央揃えにしたいだけのようです。ブートストラップフレームワークはその一例を過度に複雑にしているかもしれません、あなたはあなた自身のスタイルを持ったスタンドアロンの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 div内のどこかにネストしているなら、それはうまくいくでしょう。

8
cstrat

クラスcentercontentsを追加する

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

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

.center-blockを使う

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

私のために@ 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があります。

0
jakson