Wataame Frog

このページはブログ『Wataame Frog』の「Bootstrapで画像をレスポンシブ対応した際にセンタリングさせる方法」という記事のサンプルです。
記事URL : http://wataame.sumomo.ne.jp/archives/5467

Bootstrapで画像をレスポンシブにする

ブラウザサイスに応じて画像サイズを変更させる場合は img要素に 「img-responsive」をクラス指定しますが、左寄りとなってしまいます。（Sample.1）
画像をセンタリングさせたい場合は、以下のようにプロパティを別途用意すれば可能です。（Sample.2）

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

Sample.1

通常：センタリングなし

SAMPLE IMAGE

Sample.2

センタリングあり

SAMPLE IMAGE