Question

我正在尝试使用引导类img-responsive和center-block在中心对齐图像。但是不知何故，当从浏览器（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

查看有关网格的更多信息

为什么具有img-responsive的bootstrap类中心块不是将图像定位在中心

1 个答案: