web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

Bootstrapで、画像を中央寄せにしたい

      2016/01/12

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

<img src="images/sample1.jpg" alt="SAMPLE IMAGE" class="img-responsive">

下記の記述をcssに追加し、img要素に「img-responsive-overwrite」を指定すると、中央寄せにできる。

.img-responsive-overwrite{
    margin: 0 auto;
}
<img src="images/sample1.jpg" alt="SAMPLE IMAGE" class="img-responsive img-responsive-overwrite">

ちなみに、bootstrap記法を使わず、imgタグを使って中央揃えする場合は、こう書くと出来ます。
imgをブロック要素にしてからmargin指定を書くことで中央揃えに出来ます。(display:block;をmarginより先に書くのがコツ。)

img {
 display: block;
 margin: 0 auto;
}

 - HTML・CSS