Twitter Bootstrap3を使用して列を中央揃えにします

2013年08月10日に質問されました。  ·  閲覧回数 2.2M回  ·  ソース

bsr picture
2013年08月10日

Twitter Bootstrap 3のコンテナ(12列)内で1列サイズのdivを中央に配置するにはどうすればよいですか?

divを、クラス.centeredをコンテナ内の中央に配置したいと思います。 複数のdivがある場合は行を使用できますが、今のところ、コンテナ内の中央に1列(12列)のサイズのdivが必要です。

また、 divを半分に相殺することを意図していないため、上記のアプローチが十分に適切かどうかもわかりません。 div外側に空き領域は必要なく、 divの内容は比例して縮小します。 divの外側のスペース

回答

koala_dev picture
2013年08月10日
1991

Bootstrap 3で列<div>を中央揃えにする方法は2つあります。

アプローチ1(オフセット):

最初のアプローチでは、Bootstrap独自のオフセットクラスを使用するため、マークアップの変更や追加のCSSは必要ありません。 重要なのは、行の残りのサイズの半分に等しいオフセット(12-2)/2追加することによって中央に配置されます。

マークアップでは、これは次のようになります。

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

さて、この方法には明らかな欠点があります。 偶数の列サイズ.col-X-2.col-X-4col-X-6col-X-8 、およびcol-X-10のみがサポートされます。


アプローチ2(古いmargin:auto

実績のあるmargin: 0 auto;手法を使用して、任意の列サイズ

.col-centered{
    float: none;
    margin: 0 auto;
}

これで、任意の画面サイズの任意の列サイズに追加でき、Bootstrapのレスポンシブレイアウトとシームレスに連携します。

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

注:どちらの手法でも、 .row要素をスキップして、列を.container中央に配置できますが、コンテナークラスのパディングにより、実際の列サイズの違いは最小限に抑えられます。 。


更新:

V3.0.1ブートストラップは、という名前のクラスを内蔵しているので、 center-block使用していることをmargin: 0 autoが、不足しているfloat:none 、あなたはそれをして動作させるために、あなたのCSSにあることを追加することができますグリッドシステム。

Zim picture
2013年12月04日
299

列を中央揃えにするための推奨される方法は、「オフセット」を使用することです(例: col-md-offset-3 )。

Bootstrap3.xのセンタリングの例

要素を中央揃えにするために、 center-blockヘルパークラスがあります。

text-centerを使用して、テキスト(およびインライン要素)をます

レスポンシブデモhttp

編集-コメントで述べたように、 center-blockは列の内容とdisplay:block要素では機能しますが、Bootstrapはfloat使用するため、列自体( col-* div)では機能しませんfloat


2020年の更新

Bootstrap 4では、センタリング方法が変更されました。

  • text-centerは引き続きdisplay:inline要素に使用されます
  • mx-autoは、 center-blockを中央のdisplay:block要素に置き換えます
  • offset-*またはmx-autoを使用して、グリッド列を中央揃えにすることができます

mx-auto (自動x軸マージン)は、定義された幅を持つdisplay:blockまたはdisplay:flex要素を中央に配置します( %vwpxなど)。 Flexboxはグリッド列で使用されるため、さまざまなフレックスボックスのセンタリング方法もあります。

デモブートストラップ4水平センタリング

BS4の垂直方向のセンタリングについては、 https: //stackoverflow.com/a/41464397/171456を参照してください。

Sender picture
2014年03月18日
99

現在、Bootstrap 3.1.1は.center-blockで動作しており、このヘルパークラスは列システムで動作します。

ブートストラップ3ヘルパークラスセンター

このjsfiddleデモを確認し

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

col-center-blockヘルパークラスを使用した行の列の中央。

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
Sagive SEO picture
2013年12月15日
57

カスタムCSSファイルに以下を追加するだけです。 Bootstrap CSSファイルを直接編集することはお勧めできません。また、 CDNを使用する機能がキャンセルされます。

.center-block {
    float: none !important
}

どうして?

ブートストラップCSS(バージョン3.7以下)はmargin: 0autoを使用し

PS

このクラスを追加したら、正しい順序でクラスを設定することを忘れないでください。

<div class="col-md-6 center-block">Example</div>
Schmalzy picture
2013年08月10日
39

Bootstrap 3には、この.center-block用の組み込みクラスがあります

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

まだ2.Xを使用している場合は、これをCSSに追加するだけです。

Steffi picture
2015年02月16日
39

列を中央に配置する私のアプローチは、列にdisplay: inline-blockを使用し、コンテナーの親にtext-align: centerを使用することです。

CSSクラス「centered」をrowに追加するだけです。

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http ://jsfiddle.net/steyffi/ug4fzcjd/

RustyIngles picture
2015年07月16日
26

Bootstrapバージョン3には.text-centerクラスがあります。

このクラスを追加するだけです:

text-center

このスタイルをロードするだけです。

.text-center {
    text-align: center;
}

例:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   
joknawe picture
2018年06月25日
22

Bootstrap v4では、これは.justify-content-center.row <div>追加するだけで実現できます。

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Ali Gajani picture
2013年08月10日
15

これは機能します。 おそらくハックな方法ですが、うまく機能します。 レスポンシブ(Y)についてテストされました。

.centered {
    background-color: teal;
    text-align: center;
}

Desktop

Responsive

wali picture
2016年11月03日
7
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>