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

Question

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

在此输入图像描述

Answer 1

.center-block在Twitter Bootstrap 3中有类(自v3.0.1起),所以使用:

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

这应该是接受的答案,因为您不需要添加任何CSS来使用它. (27认同)
`class ="img-responsive"style ="margin:0 auto;"`适用于我`class ="img-responsive center-block"`不支持(bootstrap 3,但是几个月的版本) (16认同)
使用img-responsive时,对齐中心不起作用. (9认同)

Answer 2

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

我的原始答案如下所示

这是一个非常简单的解决方案.因为.img-responsiveBootstrap已设置display: block,您可以使用margin: 0 auto中心图像:

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

Answer 3

只将类添加center-block到图像中,这也适用于Bootstrap 4:

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

注意:center-block即使img-responsive使用也可以使用

Answer 4

.text-center如果您使用的是Bootstrap 3,请使用类.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

注意:这不适用于img-responsive

Answer 5

这应该使图像居中并使其响应.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

Answer 6

我会建议一个更"抽象"的分类.添加一个新类"img-center",可以与.img-responsive类结合使用:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}