bootstrap3 でimg-responsive 指定した画像が中央寄せにならない

Question

Bootstrap3 で画像にレスポンシブと丸型を適応しているのですが。

モバイルの時に中央寄せにしたいと考えて設定したつもりが、
上手く真ん中に配置されません。

どのように対処すればよいでしょうか？
ご教授頂ければ幸いです。

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-block">
        <div class="col-lg-3 col-md-4 col-sm-2 col-xs-6">
          <img src="/image/img_mod.jpg" class="img-responsive img-circle" />
        </div>
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 block_contents">
          <p>説明文<br />
             説明文説明文説明文説明文<br />
             説明文説明文説明文説明文<br /> 
             説明文説明文説明文説明文</p>
          <p class="text-right"><a href="#">続きを読む</a></p>
        </div>
      </div>
    </div>

ブロック全体を中央寄せにすると解決するかと思ったのですが、
配置されません。

そのほかにもalign-center(bootstrapのクラス)
を試しました。

同様の対処になるかと思いますが

img{
  text-align:center;
}
img{
  margin:0 auto;
}

を試しましたが、うまくいきません。
（追記）
スマホの時に(xs)40%程度に縮小された状態で中央に配置することを狙っています。上ではオーバーフローさせることを狙ったのですが、うまくいっていません。

どのように対処すればよいでしょうか？
ご教授頂ければ幸いです。

Answer 1

どのような形を望んでいるのかいまひとつ分かりませんが、こんな感じのことですか？

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-block">
        <div class="col-lg-3 col-md-4 col-sm-2 col-xs-6 col-xs-offset-3">
          <img src="/image/img_mod.jpg" class="img-responsive img-circle" />
        </div>
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 block_contents">
          <p>説明文<br />
             説明文説明文説明文説明文<br />
             説明文説明文説明文説明文<br /> 
             説明文説明文説明文説明文</p>
          <p class="text-right"><a href="#">続きを読む</a></p>
        </div>
      </div>
    </div>

Answer 2

bootstrapをどのくらい理解しているかわからないので
そんなの知ってるよと気を悪くしたらすみません

        <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
          <img src="/image/img_mod.jpg" class="img-responsive img-circle" />
        </div>

というふうに、画像を囲むdiv の classをcol-xs-12と最大サイズにしてみてはいかがでしょうか？
col-xs-x は 横に 12等分して、左からx分のスペースにはいちという意味です。

Comments

[hidepon]

ご回答有難うございます。1回目でcol-xs-12としたところ、中央に配置されたのですが、画面幅いっぱいに表示されたので、オーバーフローさせる形で縮小を試みました。40%程度に縮小したうえで、中央寄せにする方法はないでしょうか？

[moke]

未確認で悪いのですが
@media only screen and (min-width : 480px) {
image{max-width: 40%}
}
確かこんな感じのことができた気がします。

[hidepon]

なるほど。こういう対応方法もあるんですね・・・offsetを両端に設定するというのが一番早いような感じがしました。本当に有難うございました。とても参考になりました。

[gin]

いや、上記の例では画像が40％になるだけで中央に来ることはありません。
中央に持ってくるのであれば最低限「margin:0 auto;」がないとダメです。
また「image」ではなく「img」です。
が、このままではすべてのimgに適用されるのでclass指定にすべきですね。

試していないことを回答するのは止めましょう。

[moke]

はーい、すみませんでした。
経緯をよく読むとわかると思いますが、（追記）を書いていただいた時点で
この回答の役目は終了しているので
確かこういうこともできるよーと書いただけです。

[hidepon]

スミマセンでした。本当に感謝しております。いろいろな方法があるというのが分かって勉強になりました。有難うございました。