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

Question

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

.centered {
  background-color: red;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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 列になるまで縮小する)。

score 2030 · Accepted Answer

<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-4col-X-6col-X-8col-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 に追加して、グリッドシステムで動作させることができます。

score 58 · Accepted Answer

以下をカスタム CSS ファイルに追加するだけです。Bootstrap CSS ファイルを直接編集することはお勧めできません。CDNを使用できなくなります。

.center-block {
    float: none !important
}

なんで？

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

PS :

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

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

score 39 · Accepted Answer

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

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

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

score 39 · Accepted Answer

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

score 26 · Accepted Answer

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>

score 7 · Accepted Answer

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

score 6 · Accepted Answer

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

<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 のクラスで中央に配置するには、次のように記述します。

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

score 6 · Accepted Answer

行に使用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/

score 5 · Accepted Answer

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

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

2 の列を 5 オフセットして中央揃えにする
ネストされた行を作成すると、2 列の中に新しい 12 列ができます。
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>

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

グリッドを埋める正確な数がないときに列要素を画面の中央に配置しようとしている人のために、クラス名を返す小さな 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 つの要素があり、画面の行ごとに 3 つにしたいmd場合は、次のようにします。

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 で割り切れる必要があることに注意してください。

score 0 · Accepted Answer

を追加することを忘れないでください!important。次に、要素が実際に中央にあることを確認できます。

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

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

34 に答える 34

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

アプローチ2（旧margin:auto）

HTML:

CSS:

Related

Reference

アプローチ2（旧`margin:auto`）