在Bootstrap中水平居中响应图像

Question

如果具有.img-responsive类的图像的宽度小于容器宽度,则它将显示为与左对齐.添加.text-center到父元素似乎不起作用.这是一个例子:

<div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example Image" class="img-responsive" />
</div>

Answer 1

如果你真的想要关注twitter bootstrap synthax,你应该center-block按照文档中的说明使用该类.

链接到文档

代码种类:

<img class="center-block" src="something.xxx" alt="xxx">

Answer 2

这是因为.img-responsive class它的 CSSdisplay属性设置为block. 添加.img-responsive { display: inline-block; }用户样式表将通过覆盖原始值来解决问题，图像将显示为居中。

这是CSS：

.img-responsive {
  display: inline-block;
}

这是 HTML：

<div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example image" class="img-responsive" />
</div>