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


当前回答

应用于所有Booostrap对象的更准确的方法是只使用标准类不设置上下边距(因为图像可以从父类继承这些),所以我总是使用:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

我也做了一个Gist,所以如果任何变化将适用于任何bug,更新版本将永远在这里: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

其他回答

试试这个:

.img-responsive { 显示:块; 高度:汽车; max-width: 100%; 保证金:0汽车; } .Image { 背景:# ccc; 填充:30 px; } < div class = "图像" > <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique"> < / div >

这应该使图像居中,并使其响应。

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

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

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

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

在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>