【Bootstrap】DIV本体を中央寄せするにはOffsetを上手く使えば良い

 
Bootstrapでdiv本体を中央寄せしたい時は多々あるかと思います。
そんな時はOffsetクラスを使えば簡単ですね。

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

Offsetクラスは左側に空のカラムを入れてくれる

お恥ずかしい話、理解力の乏しい私は最初Bootstrapのドキュメントページを見た時にOffsetクラスの意味があまり良くわからなかったのです。

でもまあ簡単に言うと左側に指定カラム分の空白を作れるということですね。

「左側」というのが重要です。
画像で説明すると下記のようなイメージ。

Bootstrapのdiv本体の中央寄せ

「col-xs-4」のカラムの左側に「col-xs-offset-4」分の空白が出来ることが分かるかと思います。

 

中央寄せするグリッドカラムパターンは5種類

Bootstrapでは一つのrow(行)のカラム数が「12」と決まっていますので、中央寄せするのには下記の5パターンになっています。

要するに中央寄せしたいカラム数とOffsetのカラム数×2=12になっていれば良いというわけです。
 

中央寄せのデモ

では最後にデモをご覧ください。

上手く中央寄せされていますね。

ちなみにdivの中の要素を中央寄せしたい場合は「.text-center」を使えば中央寄せ出来ます。

 
photo : Bootstrap cupcakes by Niall Kennedy

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください