我使用Bootstrap 3做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小(500x500)，在浏览器中宽度为767像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
你可以在这里使用属性d-block，或者你可以在bootstrap中使用属性'text-center'或在css中使用'text-align: center'的父div。
图像默认显示为内联块，您需要将其显示为块以便以.mx-auto居中。这可以用内置的.d-block完成:
<div>
<img class="mx-auto d-block" src="...">
</div>
或者将其保留为内联块，并使用.text-center将其包装在div中:
<div class="text-center">
<img src="...">
</div>
其他回答
在Twitter Bootstrap 3中有.center-block类(从v3.0.1开始)，所以使用:
<img src="..." alt="..." class="img-responsive center-block" />
如果使用Bootstrap v3.0.1或更高版本，则应该使用此解决方案。它不会用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap特性。
我最初的答案如下，供后人参考
这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block，你可以使用margin: 0 auto将图像居中:
.product .img-responsive {
margin: 0 auto;
}
简单地把所有的图片缩略图放在row/col div中，就像这样:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
一切都会好起来的!
应用于所有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 >
