web-dev-qa-db-ja.com

Twitter Bootstrap 3を使用して列を中央揃えにする

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

.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>

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

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

csstwitter-bootstraptwitter-bootstrap-3centering
1066
bsr

Bootstrap 3で<div>列を中央揃えにするには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に追加してグリッドシステムで機能させることができます。

1873
koala_dev

中央揃えの列 の推奨される方法は "offset"を使用することです（例：col-md-offset-3）

ブートストラップ3.xのセンタリングの例

センタリング要素 の場合、center-blockヘルパークラス があります。

text-centerを center text （およびインライン要素）にも使用できます。

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

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

アップデート2018

Bootstrap 4 で、 centering メソッドが変更されました。

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

mx-auto（自動x軸余白）は、定義された幅、（display:block、vw、pxなど）を持つdisplay:flexまたは%要素を中央に配置します。 グリッドボックスではデフォルトで が使用されているため、さまざまなFlexboxのセンタリング方法もあります。

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

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

276
Zim

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

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

このjsfiddle DEMO を確認してください。

<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; */
}
92
Sender

以下をカスタムCSSファイルに追加するだけです。ブートストラップCSSファイルを直接編集することはお勧めできません。また、 _ cdn _ を使用する機能は無効になります。

.center-block {
    float: none !important
}

なんで？

ブートストラップCSS（バージョン3.7以下）は margin：0 autoを使用します。 しかし、サイズコンテナのfloatプロパティによって上書きされます。

_ ps _ ：

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

<div class="col-md-6 center-block">Example</div>
54
Sagive SEO

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

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

まだ2.Xを使っているのであれば、これをCSSに追加してください。

39
Schmalzy

列を中央揃えにするための私のアプローチは、列に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/

33
Steffi

ブートストラップ version 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>
25
RustyIngles

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

20
joknawe

これはうまくいきます。ハックな方法かもしれませんが、うまくいきます。応答性（Y）についてテストされました。

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

Desktop

Responsive

14
Ali Gajani

コンテンツを表示する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
Kieran Ryan

行にtext-centerを使用することができ、内部divがdisplay:inline-blockを持つことを確認できます（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
Alireza Fattahi
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
6
wali

もう1つのオフセットのアプローチは、2つの空の行を持つことです。次に例を示します。

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
5
LeRoy

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

元の質問に固執するには、1の列を12のグリッドの内側に配置します。

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

例えば：

<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>

this fiddle を参照してください。結果も表示するには、出力ウィンドウのサイズを大きくする必要があります。そうしないと、列が折り返されます。

5
reinder

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

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

上記のcol-lg-1をcenterのクラスにセンタリングするために、次のように書きます。

.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;
    }
}
5
Aamer Shahzad

これは私のコードではありませんが、完璧に動作し（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>
4
Binar Web

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

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

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

サンプルデモは here です。

Enter image description here

4
Mohan Dere

Koala_devが彼のアプローチ1で使用したように、私は使用が制限されているセンターブロックやマージンの代わりにoffsetメソッドを好むでしょう、しかし彼は述べました：

さて、この方法には明らかな欠点があります。それは偶数列サイズに対してのみ機能するので、.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
Abhinav Singh

あなたのブートストラップに非常に柔軟なソリューションflexboxを使うことができます。

justify-content: center;

あなたのコラムを中央に置くことができます。

flexを調べてください。

3
Harsh

.col-内で単一の.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
Walter Roman

Bootstrap行の複数の列を中央揃えにし、colsの数が奇数になるようにするには、単にその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
Ruto Collins

グリッドを埋め尽くす正確な数がわからないときに画面の中央の列要素を中心に探している人のために、クラス名を返すための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"]

覚えておいて、第二引数は12で割り切れる必要があります。

2
jsgoupil

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

<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
Bangash

単純にクラスtext-centerを使うことをお勧めします。

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
1
Dadhich Sourav

Bootstrap 4を使用してdivクラスでmx-autoを使用します。

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>
1
Bruno M

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

.row-centered {
    display: flex;
    justify-content: space-between;
}
1
Eran Shabi

より正確に言うと、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年

.......オフセット........data。 .......使用されていない........

1
Tech

.rowまたは.colの内側に次のスニペットを追加します。これはBootstrap 4 *用です。

d-flex justify-content-center
1
Thomas Chirwa

これを試して

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

col-md-2などの他のcolも使用できます。

1
UmarJamil

方法1： 

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

方法2：

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

ブートストラップのヒント、例、およびツール： OnAirCode

0
Pacific P. Regmi

!importantを追加することを忘れないでください。そうすれば、その要素が本当に中心にくることを確認できます。

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

ブートストラップ4ソリューション：

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
0
JanBrus

ブートストラップ4を使えば、 here のように単にjustify-content-md-centerを試すことができます。

<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>

enter image description here

0
Hossein Narimani Rad