divを中央寄せしたい

Question

###前提・実現したいこと
現在は 図1 のようになっています。
図2 のように中心に寄せたいのですがうまくいきません。
どのようにすれば中心に寄りますでしょうか。

図1. 現在の状態

図2. 理想の状態

###試したこと

• <center> を使う

効果がありませんでした。
https://jsfiddle.net/fb0dj4jp/

• Bootstrap のドキュメントには offset を使うと書いていました

http://getbootstrap.com/css/#grid

col-md-offset-4と書いても寄りませんでした。
試しに空divを1つ入れると右に寄ってしまいました。
https://jsfiddle.net/fb0dj4jp/1/

###補足情報(言語/FW/ツール等のバージョンなど)
Bootstrap v4 alpha

Answer 1

今のコードが書いていないのでなんとも分かりづらいですが、
例えば示されている画像の「Starter」「Professional」がそれぞれ

<div class="row">
<div class="col-md-4">Starter…</div>
<div class="col-md-4">Professional…</div>
</div>

となっているとしましょう。

ご存じの通り、Bootstrapは12カラムで1行ですから、

<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">Starter…</div>
<div class="col-md-4">Professional…</div>
<div class="col-md-2"></div>
</div>

とするか、

<div class="row">
<div class="col-md-4 col-md-offset-2">Starter…</div>
<div class="col-md-4">Professional…</div>
</div>

とすることで、中央に揃うと思います。

Comments

[aglkjggg]

ご回答ありがとうございます。
希望通りの動作になりました！

「12カラムで1行」というのを失念して考えていました＞＜