Twitter Bootstrap 3を使用して列を中央に配置する

1146

Twitter Bootstrap 3でコンテナー（12列）内の1列サイズのdivを中央揃えするにはどうすればよいですか？

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>
スニペットを展開

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

またdiv、半分を相殺しないことを意図しているため、上記のアプローチで十分かどうかもわかりません。外の空きスペースdivとdiv縮小の内容は比例して必要ありません。divの外側のスペースを空にして均等に分散させたいです（コンテナーの幅が1列になるまで縮小します）。

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
ソース

回答:

1963

<div>Bootstrap 3で列を中央に配置するには、2つの方法があります。

アプローチ1（オフセット）：

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

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

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

さて、この方法には明らかな欠点があります。それだけでも、列のサイズのために働く、これだけ.col-X-2、.col-X-4、col-X-6、col-X-8、およびcol-X-10サポートされています。

アプローチ2（古いmargin:auto）

実証済みの手法を使用して、任意の列サイズを中央に配置できますmargin: 0 auto;。Bootstrapのグリッドシステムによって追加されたフローティングを処理する必要があるだけです。次のようなカスタムCSSクラスを定義することをお勧めします。

.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 Bootstrapには、center-blockを使用するという名前の組み込みクラスmargin: 0 autoがありfloat:noneますが、がありません。これをCSSに追加して、グリッドシステムで動作させることができます。

— koala_dev
ソース
1
フロートをクリアするために要素に追加できるclearfix独立ルールがあるため、センターブロックルールにはfloat：noneがないと思います。
— ディエゴフェルナンドムリーリョバレンシ14
7
@DiegoFernandoMurilloValenci .clearfixは、要素のfloatプロパティ（を使用して中央に配置するために必要）を削除しないため、この場合は機能しません。margin: 0 autoコンテナーが浮動要素を内部にラップするだけです
— koala_dev
4
ないので、これをカラムで使用することはできませんfloat:none;
— airtonix、2015
2
あなたは、単一の行にもっとして1列を中央揃えにしたい場合は、この回答を見stackoverflow.com/questions/28683329/...
— コナー・スベンソン
3
Bootstrap4でオフセットの構文が変更されました（最新バージョン以降）。この応答を例として使用すると、col-md-offset-5クラスはoffset-md-5になります。
— lgants 09/10/17
296

好ましい方法列のセンタリングは、「オフセット」を使用することです（例：col-md-offset-3）

Bootstrap 3.xのセンタリングの例

要素をセンタリングするために、center-block ヘルパークラスがあります。

を使用text-centerして、テキスト（およびインライン要素）を中央に配置することもできます。

デモ：http : //bootply.com/91632

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

2018年の更新

今でブートストラップ4、芯出しの方法が変更されています。..

  • text-centerdisplay:inline要素にまだ使用されています
  • mx-autocenter-block中央のdisplay:block要素に置き換えます
  • offset-* または mx-autoグリッド列を中央に配置するために使用できます

mx-auto（自動X軸マージン）を中心に説明するdisplay:block又はdisplay:flex持つ要素定義された幅を（、 、%、vw、px等。）。フレックスボックスはデフォルトでグリッド列で使用されるため、さまざまなフレックスボックスのセンタリング方法もあります。

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

BS4の垂直方向の中央揃えについては、 https：//stackoverflow.com/a/41464397/171456を参照してください

— ジム
ソース
31
残念ながら、このヘルパークラスはfloatプロパティを処理しないため、列システムでは機能しません。たとえば、このデモを参照してください。
— koala_dev 2013
13
それには、センターブロック{float：none;のみが必要です。}、それは動作します。bootply.com/122268
— Matias Vad
5
OPについてはわかりませんが、text-center詳細を探してここに来ました-他の答えはどれも提供しませんでした。これは私の投票を取得します。
— domoarigato 2015
1
ないので、これをカラムで使用することはできませんfloat:none;
— airtonix、2015
98

現在、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>

ヘルパークラスセンター

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

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— 送信者
ソース
float:nonediv centre-blockにstyle="width : ?px"スタイルが適用されていることを確認して、追加せずにこれを機能させました。たとえば、画像の幅。3.2.2で動作
— Piotr Kula
マージン：0自動; -代わりにマージン左+マージン右
— mmike
57

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

.center-block {
    float: none !important
}

どうして？

Bootstrap CSS（バージョン3.7以前）はマージンを使用します：0 auto; ですが、サイズコンテナのfloatプロパティによってオーバーライドされます。

PS：

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

<div class="col-md-6 center-block">Example</div>
— Sagive SEO
ソース
1
私はBootstrap 3.3.7を使用していますが、これが私に有効な唯一の方法です！
— illagrenan
1
これは機能します。しかし、!important必要だとは思わない
— ジャンフランコP.
1
@GianfrancoP。P.あなたの権利、しかし...それはロードの順序に依存し、私は間違いのない方法を提供したかったのです。
— Sagive SEO 2017
39

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

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

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

— シュマルジ
ソース
これはおそらくあなたに望ましい効果を最も簡単に与えるでしょう。また、よりモジュール化されたアプローチをとる場合は、.centeredクラスに幅を投げるか、2番目のクラスを追加します
— Matt Lambert
2
フロートの追加：なし。.centeredにすると、クラスをコンテナに移動できます。コードをよりクリーンに保つ
— Adam Patterson
7
ないので、これをカラムで使用することはできませんfloat:none;
— airtonix '28 / 02/28
37

列を中央に配置する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/

— シュテフィ
ソース
2
これが100％の時間で機能した唯一の回答です。他の機能は機能しましたが、ブートストラップがモバイルビューに切り替わったときは機能しませんでした（アイテムが左側に移動しました）。
— Levi Fuller
これは私でも機能した唯一のものでした。.center-blockは1つの列に対してのみ機能し、その数に関係なくすべての列を中央に配置する必要があります。
— cjohansson 2016
私にとってもうまくいった唯一の解決策。他のものは、ブラウザがウィンドウの場合にのみ機能しました（フルスクリーンではありません）。
— kiwicomb123 2017年
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>
— RustyIngles
ソース
このクラスが追加される場所を明確にしますか？
— aksu 2016
こんにちは@ aksu、.cssを追加する必要はありません。提供されている例を見てください。
— JoshYates1980
15

これは機能します。おそらくハックな方法ですが、うまく機能します。応答性についてテストされました（Y）。

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

デスクトップ

レスポンシブ

— アリ・ガジャニ
ソース
要素がインラインで表示されるためにのみ機能します。をimgブロックとして設定できます。
— ProfileTwist 2013
多分あなたの孤立したテストケースで。私は.centered img { display: inline; }あなたの答えに追加し、それから代わりに賛成票に値するでしょう。
— ProfileTwist 2013
問題ない。OPが彼/彼女の答えを見つけると確信しています:)
— Ali Gajani 2013
ブートストラップ3では、上で学んだように、.text-centerクラスはネイティブで同じことを行います。
— domoarigato 2015
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— ワリ
ソース
6

列を中央に配置するには、以下のコードを使用する必要があります。colsはmargin auto以外のフローター要素です。また、フロートなしに設定します。

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

上記のcol-lg-1を中央揃えのクラスで中央揃えするには、次のように記述します。

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

DIV、使用内コンテンツを中央にtext-align:center、

.centered {
    text-align: center;
}

モバイルではなくデスクトップと大きな画面のみに中央揃えにしたい場合は、次のメディアクエリを使用します。

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

また、モバイルバージョンのみでdivを中央に配置するには、以下のコードを使用します。

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
— アーマー・シャーザド
ソース
6

コンテンツを表示する1つの列をcol-xs-12（mobile-first ;-)に設定し、中央に配置するコンテンツの幅を制御するためにのみコンテナーを構成するだけです。

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
スニペットを展開

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
スニペットを展開

デモについては、http： //codepen.io/Kebten/pen/gpRNMeを参照してください :-)

— キーラン・ライアン
ソース
6

オフセットのもう1つの方法は、2つの空の行を持つことです。たとえば、

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— ルロイ
ソース
1
2つの役に立たないdiv、col-md-
— offset-
1
同意する。この方法を使用したのは、実際に機能し、テストされたためです。
— LeRoy
6

text-center行にを使用して、内部divにdisplay:inline-block（notなしでfloat）あることを確認できます。

なので：

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

そしてCSS：

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

フィドル：http : //jsfiddle.net/DTcHh/3177/

— アリレザ・ファッタヒ
ソース
6

ここにjustify-content-md-center記載されているように、ブートストラップ4を使用すると、簡単に試すことができます

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

ここに画像の説明を入力してください

— ホセイン・ナリマニ・ラッド
ソース
1
@AdamErickson質問は特にブートストラップ3ソリューションを求めました。この答えは、2019年にいくつかのソフトウェアは、まだブートストラップ3を使用している、おそらくBS4に移動するための方法であるとして
— A1rPun
5

これはおそらく最良の答えではありませんが、これにはもう1つの創造的な解決策があります。koala_devで指摘されているように、列オフセットは列サイズが偶数の場合にのみ機能します。ただし、行をネストすることにより、不均一な列を中央揃えにすることもできます。

12のグリッド内で1の列を中央に配置する元の質問に固執します。

  1. 5をオフセットして2の列を中央に配置する
  2. ネストされた行を作成すると、2つの列の中に新しい12列が表示されます。
  3. 1の列を中央に配置し、1は2の「半分」（手順1で中央に配置したもの）なので、ネストされた行で6の列を中央に配置する必要があります。これは、3をオフセットすることで簡単に行えます。

例えば：

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

参照してください。このフィドルあなたもそうでない列が折り返され、その結果を参照してくださいために、出力ウィンドウのサイズを大きくしなければならないこと、してください注意を。

— Reinder
ソース
5

これは私のコードではありませんが、完全に動作し（Bootstrap 3でテスト済み）、col-offsetをいじる必要はありません。

デモ：

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
スニペットを展開

— Binar Web
ソース
4

これを実現するには、テーブルレイアウトメカニズムを使用します。

メカニズムは次のとおりです。

  1. すべての列を1つのdivでラップします。
  2. 固定レイアウトのテーブルとしてそのdivを作成します。
  3. 各列をテーブルセルにします。
  4. コンテンツの位置を制御するには、vertical-alignプロパティを使用します。

サンプルデモはこちらです

ここに画像の説明を入力してください

— モハンデレ
ソース
3

彼のアプローチ1でkoala_devを使用したので、使用が制限されているセンターブロックやマージンの代わりにオフセットメソッドを使用しますが、彼が述べたように：

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

これは、奇数列に対して次のアプローチを使用して解決できます。

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— アビナフ・シン
ソース
3

非常に柔軟なソリューションフレックスボックスをブートストラップに使用できます。

justify-content: center;

列を中央に配置できます。

フレックスをチェックしてください。

— 厳しい
ソース
2

.col-内の1つだけを中央に配置する必要がないため.row、次のクラスを.rowターゲット列の折り返しに設定します。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

例

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— ウォルターロマン
ソース
2

グリッドを満たす正確な数がない場合に列要素を画面の中央に配置したい人のために、クラス名を返すJavaScriptの小さな部分を書きました：

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

5つの要素があり、md画面の行ごとに3つ必要な場合は、次のようにします。

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

2番目の引数は12で割り切れる必要があることに注意してください。

— jsgoupil
ソース
2

ブートストラップ行の複数の列を中央揃えにし、列の数が奇数の場合は、このcssクラスをその行のすべての列に追加するだけです。

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

したがって、HTMLには次のようなものがあります。

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— ルト・コリンズ
ソース
2

これを試して

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

他colにも同様に使用できますcol-md-2。

— ウマルジャミル
ソース
2

私は単にクラスを使用することをお勧めしますtext-center：

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— ダディチ・ソウラフ
ソース
2

このコードを試してください。

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ここでは、col-lg-1を使用しました。大きなデバイスでdivを正しく中央に配置するには、オフセットを10にする必要があります。中規模から大規模のデバイスを中心に配置する必要がある場合は、lgをmdに変更します。

— バンガッシュ
ソース
2

Bootstrap 4ソリューション：

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— ジャンブルス
ソース
1

これを行に配置すると、内部のすべての列が中央に配置されます。

.row-centered {
    display: flex;
    justify-content: space-between;
}
— エランシャビ
ソース
要素を無反応にしました。
— gfivehost
1

より正確には、Bootstrapのグリッドシステムには12列が含まれ、コンテンツを中央に配置するには、たとえば、コンテンツが1列を占めるとしましょう。Bootstrapのグリッドの2つの列を占有し、2つの占有された列の半分にコンテンツを配置する必要があります。

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

「col-xs-offset-5」は、グリッドシステムにコンテンツの配置を開始する場所を指示しています。

'col-xs-2'は、グリッドシステムに、コンテンツが占める残りの列の数を指示しています。

'centered'は、コンテンツを中央に配置する定義済みクラスになります。

この例は、Bootstrapのグリッドシステムでの例です。

列：

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

.......オフセット.......。データ。.......使用されていない........

— テック
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.