在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 类，如文档中所述。

<强> Link to the documentation

代码种类：

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

Answer 2

这是因为.img-responsive class的CSS display属性设置为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>