响应式图像对齐中心引导程序 3
我使用 Bootstrap 3 制作目录。在平板电脑上显示时,产品图像看起来很丑,因为它们的尺寸很小(500x500),在浏览器中的宽度为 767
像素。我想把图像放在屏幕的中央,但由于某种原因我不能。谁来帮助解决问题?
-
如果您使用的是 Bootstrap v3.0.1 或更高版本,则应改用此解决方案。它不会使用自定义 CSS 覆盖 Bootstrap的样式,而是使用 Bootstrap 功能。
.center-block
Twitter 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; }