为什么bootstrap类与img响应中心块没有定位图像中心

Question

我想在中心使用引导类img响应和中心块对齐图像。但不知何故，当从浏览器（IE和Chrome）测试时，图像不会水平居中对齐。

奇怪的是，当使用小提琴尝试使用相同的html将其对齐时，它居中。

你能帮我找到我能在代码中纠正什么，以便图像在页面上水平居中？

小提琴是demo

代码：

<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-responsive-resets