BinaryDevelop
  1. ホーム
  2. css

[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する

2022-03-16 23:07:10

質問

のコンテナ（12列）内で、1列サイズのdivを中央寄せにするにはどうしたらよいでしょうか。 Twitter Bootstrap 3 ? 

.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 で、コンテナ（12カラム）内の中央に1カラムの大きさで表示されます。

を相殺することが目的ではないので、上記のやり方で良いのかとも思っています。 div を半分にした。の外側の空きスペースは必要ありません。 div の中身が div は比例して縮小します。私がしたいのは divの外側の空いたスペースが均等になるように (コンテナの幅が1カラムになるまで縮小する）。

どのように解決するのですか？

列の中央揃えには、次の2つのアプローチがあります。 <div> をBootstrap 3で使用することができます。

アプローチ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に追加することで、グリッドシステムで動作させることができます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します