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">

: 【HTML】a要素（aタグ）で電話発信用リンクを設定する方法

a要素の href 属性に電話番号を設定するだけでスマートフォンで電話発信用のリンクを作成することが可能です。その方法を備忘録としてポストします。

: 【CSS】リストの奇数・偶数・指定番目などを指定して装飾する方法

リストの奇数・偶数・指定番目などを指定して装飾する方法を備忘録としてポストします。

: 【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3では数行のコードで実現可能。忘備録としてポストしておきます。

: 【JS】スクロールしたら画面途中にあるグローバルナビを画面上部に固定する方法

トップページなどで、動画や画像コンテンツの下に配置してあったグローバルナビを、スクロールしたら画面上部に固定して表示するスクリプトを作成したので、備忘録を兼ねて紹介します。