响应式图像对齐中心引导程序 3

Question

我使用 Bootstrap 3 制作目录。在平板电脑上显示时，产品图像看起来很丑，因为它们的尺寸很小（500x500），在浏览器中的宽度为 767
像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁来帮助解决问题？

Answer 1

如果您使用的是 Bootstrap v3.0.1 或更高版本，则应改用此解决方案。它不会使用自定义 CSS 覆盖 Bootstrap的样式，而是使用 Bootstrap 功能。

.center-blockTwitter Bootstrap 3 中有类（从 v3.0.1开始），所以使用：

<img src="..." alt="..." class="img-responsive center-block" />

我的原始答案如下所示，以供后代使用

---

这是一个令人愉快的简单修复。因为.img-responsive从 Bootstrap 已经设置display: block，您可以使用margin: 0 auto来居中图像：

.product .img-responsive {
    margin: 0 auto;
}