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

Posted 2020-11-15 dajunjun

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

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

我的原始答案显示在后面

---

这是一个令人愉快的简单解决方案。因为Bootstrap中的.img-responsive已经设置了display：block，所以可以使用margin：0 auto来定位图像：

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

有 。在Bootstrap 3（ _v3.0.1_ ）中使用 block类，所以使用：

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

未经作者同意，本文严禁转载，违者必究！

原文:大专栏  响应式图像对齐中心引导3