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

2014/08/22 2019/12/17

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

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

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

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

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

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

.img-responsive-overwrite{
    margin: 0 auto;
}

.img-responsive-overwrite{

margin: 0 auto;

}

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

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

: SVGファイルをIllustratorで簡単に作成し、HTML5で表示する方法

最近、ロゴに「.svg」となったファイルを使うサイトが増えていているような気がします。
.svgとはなんなのかよく知らなかったので調査し、実際にブラウザで表示させることが出来るようになったので、備忘録としてポストしてみたいと思います。