Bootstrap 列のコンテンツを中央に配置するにはどうすればよいですか?

Question

列の内容を中央揃えにしようとしています。私には効果がないようです。これは私のHTMLです:

リーリー

JSFiddle デモ

Answer 1

[2022 年 4 月更新]: Bootstrap のバージョン 5.1 がテストされ、組み込まれました。

---

この質問はかなり古いものであることは承知しています。そして質問には、彼が使用していたBootstrapのバージョンについては言及されていませんでした。したがって、この質問に対する答えはすでに解決されていると思います。

皆さん (私と同じように) この質問に遭遇し、現在のブートストラップ 5.0 (2020) および 4.5 (2019) フレームワークを使用して答えを探している場合は、ここに解決策があります。

ブートストラップ 4.5、5.0、および 5.1

列 div で d-flex justify-content-center を使用します。これにより、すべてがその列の中央に配置されます。

リーリー

列内のテキストを整列させたい場合は、text-center

を使用してください。 リーリー

列にテキストと画像がある場合は、 d-flex justify-content-center および text-center を使用する必要があります。

リーリー

Answer 2

＃＃＃使用：＃＃＃ リーリー ＃＃＃ の代わりに ＃＃＃ リーリー

ブートストラップ 3 CSS も使用できます:

リーリー

Bootstrap 4 には、コンテンツをセンタリングするための Flex クラスが追加されました:

リーリー

flex-direction

が

column

でない限り、デフォルトでは x-axis になることに注意してください。