Bootstrapで画像を中央寄せする方法を解説！
Bootstrapで用意されているクラスを使って画像を簡単に中央寄せにする方法をサンプルコード・実際の使用例を交えて解説します。また、Bootstrapでレスポンシブ対応にした画像を、さらに中央寄せにする例も紹介します。
Bootstrapで画像を中央寄せにしたい！
Bootstrapには簡単に画像を見やすく表示するためのクラスが用意されています。この記事では、簡単に画像を中央寄せにする方法を紹介します。
２パターンの方法をサンプルコード・プレビュー付きで解説しており、最後にレスポンシブに対応した画像を中央寄せにする方法も紹介します。
Bootstrapで画像を中央寄せする方法
以下のプレビューは、img要素を使ってサンプル画像を表示しています。こちらの画像を中央寄せにする方法について解説していきます。
.d-blockと.mx-autoを適用
index.html
<img class="d-block mx-auto" src="sample.jpg" alt="サンプル画像" style="width:300px;">上記のコードのように、img要素に.d-blockと.mx-autoを適用することで、画像を中央寄せにすることができます。
.mx-autoを適用すると要素の左右のマージンを最大幅取るため中央寄せになります。しかし、これはブロック要素にしか効果がなく、img要素はインライン要素なのでこれだけでは画像は中央寄せになりません。
そこで、.d-blockを適用することで、img要素がブロック要素として扱われ、画像が中央寄せになります。
以下が実際に適用した結果です。
.text-centerを適用
index.html
<div class="text-center">
<img src="sample.jpg" alt="サンプル画像" style="width:300px;">
</div>先程述べたようにimg要素はインライン要素であるため、親要素に.text-centerを適用することでも中央寄せにできます。
上記のコードでは、新たにimg要素を含むdiv要素を作成し、.text-centerを適用しています。
以下が実際に適用した結果です。
レスポンシブかつ中央寄せにする方法
Bootstrapでは、img要素に.img-fluidを適用することで画面幅（親要素の幅）に応じて画像のサイズを変化させることができます。このレスポンシブな画像を中央寄せにする例を最後にご紹介します。
.img-fluidとw-*を適用
index.html
<img class="d-block mx-auto img-fluid w-50" src="sample.jpg" alt="サンプル画像">上記の例では、img要素に対して.d-block、.mx-auto、そして.img-fluidと.w-50を適用しています。
.d-blockと.mx-autoに関しては先述しましたが、.img-fluidを適用することでレスポンシブ対応にし、.w-50を適用することで画像幅を親要素の50%にしています。同様に.w-25や.w-75などを適用することで好きな画像幅にすることができます。
以下が実際に適用した結果です。
