为什么具有img响应的bootstrap类中心块没有将图像定位在中心

Question

我正在尝试使用引导程序类img responsible和center block将图像居中对齐。但不知何故，当从浏览器（IE和chrome）测试时，图像并没有在中心水平对齐。

奇怪的是，当尝试使用fiddle时，相同的html会将其居中对齐。

你能帮我找到我在代码中可以纠正的地方吗？这样图像就可以水平地居中在页面上了？

Fiddle正在演示

代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <img src="http://www.wallpapersonly.net/wallpapers/monocles-lens-testing-1280x800.jpg" class="img-responsive center-block">        
    </div>
  </div>
</div>

Answer 1

正如您所提到的，它似乎正在JSFiddle上工作；可能是因为预览无法被解释为大屏幕。

您使用col-md-8作为图像的父对象，因此图像所考虑的区域会缩小并向左对齐，因此看起来不会以整个屏幕为中心；

要解决此问题，可以删除col-md-8类，也可以向其中添加col-md-offset-2；

您可以在上查看有关网格的更多信息http://getbootstrap.com/css/#grid-响应复位