【初心者向け】Bootstrap 画像を中央揃えにする方法(css)

この記事は…

結論

Bootstrapが用意しているクラスのうち、d-block と mx-auto を使えば、画像を画面中央よせにできます。

書き方としては以下のような感じですね。

ファイル.html

<img src="PATH" class="d-block mx-auto">

仕組みを理解すれば、Bootstrapを用いずとも自身のcssを修正するだけで画像を中央よせにできます。

これは左右のマージン(margin)を自動でサイズ調整するようにしたクラスです。

公式サイトで詳細説明がありますが、ざっくり言うと左右のマージンを最大幅とって中央よせにする仕組みと捉えてください。
https://getbootstrap.jp/docs/4.3/utilities/spacing/

開発者ツールで確認すると、左右のマージン(margin-left margin-right)を auto !important している仕組みということが分かります。

つまり、自分のcssに適用してカスタマイズしたい場合は、以下の部分を書けば、同じ効果が得られるようになります。

ファイル.css

margin-left: auto !important;
margin-right: auto !important;

これはブロック要素として定義するもので、cssで言うと以下の内容と同義です。（というか中身がコレです）

display: block;

imgタグの要素は、ブロック要素ではなくインライン要素のため、mx-autoのみでは中央よせになりません。

このために d-block を用います。

d-block でブロック要素にしてあげることで、mx-autoが働き、中央よせになるという仕組みです。

imgタグを画面中央よせにするには以下の２つで出来ることを解説しました。

cssでの書き方も解説したので、仕組みを理解して、今後も色々と試していきましょう！