twitter bootstrapで画像をレスポンシブ指定したら中央寄せが効かなくなってしまった
twitter bootstrapので画像をレスポンシブ指定(クラス"img-responsive")したら中央寄せが効かなくなってしまった。
↓コードはこんな感じ
<div class="text-center"> <img src="./image.jpg" class="img-responsive" alt="hoge"> </div>
どうやらクラス"img-responsive"を指定すると、横幅のmarginが調節されて左寄せになってしまう様子。
以下のようにstyleでmargin autoを指定したらちゃんと中央寄せになった。
<img src="./image.jpg" class="img-responsive" alt="hoge" style="margin: 0 auto">
※P.S.
そもそも「text-center」はこんな風に画像に対して使っちゃいけないみたいですね・・。
bootstrap公式には「text-center」ではなくて「center-block」を使いましょうと書いてありました。
<img src="./image.jpg" class="img-responsive center-block">