プログラミング・Web開発 知識・ノウハウ

Bootstrapで画像をレスポンシブ対応した際にセンタリングさせる方法。

2025/04/28

Bootstrap使用時、「img-responsive」プロパティで画像をレスポンシブ対応させた場合に左寄せとなりますが、それを中央寄せ(センタリング)させる方法を忘備録としてポストします。

img-responsiveで画像をレスポンシブに

左寄せになる

このように img 要素に「img-responsive」を指定すると、画像がレスポンシブ対応し、ブラウザサイズに応じて画像サイズも変更させるようになります。

中央寄せにしてみる

では中央寄せにしたい場合はどうすればよいか。
別途、プロパティを用意することで対応出来ました。

デモ

-プログラミング・Web開発, 知識・ノウハウ
-, , , ,