コンテナ（12列）内の1列サイズのdivを中央に配置するにはどうすればいいですか？Twitter ブートストラップ 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が、今のところは、コンテナ内で中央揃えされる 1 列のサイズ (12 列) の が必要ですdiv。
divまた、上記のアプローチは、 を半分にオフセットする意図がないため、十分かどうかはわかりません。 の外側に空きスペースは必要なくdiv、 のコンテンツは比例して縮小されます。 div の外側の空きスペースを均等に分散させdivたいのです(コンテナーの幅が 1 列に等しくなるまで縮小します)。
ベストアンサー1
<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が、コンテナー クラスのパディングにより、実際の列サイズにわずかな違いが生じることがわかります。
アップデート：
center-blockv3.0.1 以降、Bootstrap には を使用するという組み込みクラスがありますmargin: 0 autoが、 が欠落しているためfloat:none、それを CSS に追加してグリッド システムで動作するようにすることができます。