css - 画面中央 - bootstrap 中央寄せ 上下



Twitter Bootstrapを使用して列を中央揃えする (20)

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

スターター・fiddle見てください。

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

だから、クラスcenteredにコンテナ内にcenteredれたdiv必要です。 複数のdivがある場合は行を使用できますが、今はコンテナ内の中央にある1列のサイズのdiv(12列)が必要です。

私はまた、上記のアプローチが十分であることを確信していないので、 divオフセットすることは意図していません。 私はdiv外に空きスペースが必要ではなく、 divの内容は比例して縮小します。 私は、divの外側のスペース空にして、均等に分散させたい(コンテナの幅== 1列まで縮小する)。

https://src-bin.com


Answer #1

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

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

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

サンプルデモはhere



Answer #3

.col-内に1つの.col-のみを配置する必要は決してないので、私は目標の列をラップすることに以下のクラスを設定します。

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

Answer #4

ブートストラップ3には、この.center-block用の組み込みクラスが.center-block

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

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


Answer #5

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


Answer #6

あなたのグリッドを埋めるための正確な番号がないときに、画面上の列要素を中央に置くことを望む人のために、私はクラス名を返すために少しの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で割り切れる必要があることに注意してください。


Answer #7

これで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>

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

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

Answer #8

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

元の質問に固執して、12のグリッドの内側に1の列を中心に配置する場合。

  1. それをオフセットして2の列を中心に設定する5
  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>

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


Answer #9

これは私のコードではありませんが、完全に動作し(ブートストラップ3でテストされています)、私はcol-offsetを使いこなす必要はありません。

デモ:

/* centered columns styles */

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

.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row row-centered">
    <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>


Answer #10

これをカスタムCSSファイルに追加するだけで、ブートストラップCSSファイルを直接編集することは推奨されず、CDNを使用する能力が失われます。

.center-block {
    float: none !important
}

どうして?

ブートストラップCSS(Ver 3.7以前)は以下を使用します: margin:0 auto; サイズコンテナのfloatプロパティによってオーバーライドされます。

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

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

Answer #11

これを試して

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

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


Answer #12

より正確には、ブートストラップのグリッドシステムには12個の列が含まれています。コンテンツを中央に配置するには、コンテンツが1列を占めているとしましょう。 ブートストラップのグリッドの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'は、コンテンツが占有する必要のある残りの列の数をグリッドシステムに伝えています。

「センタリングされた」とは、コンテンツを中心とする定義されたクラスになります。

この例は、Bootstrapのグリッドシステムのように見えます。

列:

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

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


Answer #13

コンテンツを表示する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 //codepen.io/Kebten/pen/gpRNMe :-)を参照してhttp://codepen.io/Kebten/pen/gpRNMe


Answer #14

ブートストラップ3に列<div>を配置するには、2つの方法があります。

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

最初のアプローチでは、ブートストラップ独自のオフセットクラスを使用しているため、マークアップや余分な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-2.col-X-4col-X-6col-X-8col-X-10がサポートされています。

アプローチ2(古いマージン:自動)

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

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

これで任意の画面サイズで任意のカラムサイズに追加することができ、ブートストラップの応答レイアウトとシームレスに動作します:

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

注:どちらの手法でも、 .row要素をスキップし、 .row内側に列を.rowすることもできますが、コンテナクラスのパディングのために実際の列のサイズに最小限の違いが見られます。

更新:

v3.0.1以降、bootstrapにはmargin: 0 autoを使用するcenter-blockという名前のクラスが組み込まれていますが、 float:none 。 これをCSSに追加して、グリッドシステムと連携させることができます。


Answer #15

列を中央に配置するには、以下のコードを使用する必要があります。 colはマージンautoの他にfloater要素です。 私たちはまた、それを浮かべないように設定します。

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

Answer #16

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

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

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/ ://jsfiddle.net/steyffi/ug4fzcjd/


Answer #17

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

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

Answer #18

行のtext-centerを使用して、内部divにdisplay:inline-blockfloat )があることを確認できdisplay:inline-block

として:

<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/ : http://jsfiddle.net/DTcHh/3177/


Answer #19

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

justify-content: center;

あなたのコラムを集中させることができます

flexチェックしてください。


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




centering