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


当前回答

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

其他回答

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

我最初的答案如下,供后人参考


这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block,你可以使用margin: 0 auto将图像居中:

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

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

<img src="..." alt="..." class="img-responsive center-block" />
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

只添加类中心块到一个图像,这适用于Bootstrap 4:

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

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

要添加到已经给出的答案,将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。