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

この記事は1分で読めます

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;
}
  • 2015 01.24
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事