Bootstrapで画像をレスポンシブ対応した際にセンタリングさせる方法。
2019/12/17
Bootstrap使用時、「img-responsive」プロパティで画像をレスポンシブ対応させた場合に左寄せとなりますが、それを中央寄せ（センタリング）させる方法を忘備録としてポストします。
img-responsiveで画像をレスポンシブに
左寄せになる
|
1 |
<img src="./img/sample1.jpg" alt="SAMPLE IMAGE" class="img-responsive"> |
このように img 要素に「img-responsive」を指定すると、画像がレスポンシブ対応し、ブラウザサイズに応じて画像サイズも変更させるようになります。
中央寄せにしてみる
では中央寄せにしたい場合はどうすればよいか。
別途、プロパティを用意することで対応出来ました。
|
1 2 3 |
.img-responsive-overwrite{ margin: 0 auto; } |
|
1 |
<img src="./img/sample1.jpg" alt="SAMPLE IMAGE" class="img-responsive img-responsive-overwrite"> |
デモ
Bootstrapで画像をセンタリングするデモ
https://lightning-bolt.xyz/bootstrap/image_centering.html
https://lightning-bolt.xyz/bootstrap/image_centering.html