やったこと

webサービスを作るときに考えたことを垂れ流します

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