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

: 【CSS】blockquoteタグのデザインを見栄えよくしてみる

ポスト内容に参照元のテキストを引用する場合に使う「blockquote」タグですが、デフォルトの見た目がイマイチだったので見やすさ、分かりやすさ、自己満足度を高めるためにデザインを編集してみました。

: 【CSS】角丸を表示する時のベンダープレフィックス -moz-border-radius が Firefox で効かなくなっていた件

本当に今更なことなのですが、CSS3で角丸の作り方。Firefox13以降では仕様が変わったために、プレフィックスを省いた書式が必要になっています。そのまとめです。

: 【CSS】改行が入っても文字の頭をそろえる（2行目以降を1文字下げる）方法

箇条書きや注釈に「・」や「※」をよく使うと思いますが、改行すると記号が回りこんで埋もれてしまいがちです。
今回は記号ではありませんが、利用規約をHTML化する作業をしていた時に「(1)」などがやはり回りこんでいたのが非常に気になったので、それを回避、揃える方法を備忘録としてポストします。

: 【CSS】tableタグのtd中でURLなどアルファベット文字列を改行させたい場合の書き方

URLなどアルファベットや記号が連続している場合、テーブルの横サイズを500px等に指定していても（自動的に）改行せず、横サイズいっぱいまで続いてしまうような場合に自動改行させるCSSを紹介します。

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

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