CSS在bootstrap响应div中居中图像

Question

我正在尝试将图像置于响应式div中。

右边的对齐是正确的，因为窗口很宽，但是当div跳到下一级时窗口会减少，我希望图像显示为居中。目前使用几种方法我无法从左侧移动它。

JSfiddle

HTML

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

<div class="col-xs-6 col-md-4"> 
    <img>...</img> <!-- the img i am trying to center -->
</div>

我试过了 img上的margin: 0 auto;，以及其父级的relative不起作用。

或者我已经尝试了在bootstrap中居中内容的假定方法：

class="img-responsive center-block"上的

img 其中也行不通。

我在这里错过了什么吗？

Answer 1

好的，我明白了。我通过使用响应网格的错误类来犯了一个错误。

已更改：

<div class="col-xs-12 col-md-8">.col-md-8</div>

<div class="col-xs-6 col-md-4"> 
    <img>...</img> <!-- the img i am trying to center -->
</div>

要

<div class="col-md-8">.col-md-8</div>

<div class="col-md-4"> 
    <img>...</img> <!-- the img i am trying to center -->
</div>