爲什麼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