我使用Bootstrap 3做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小(500x500)，在浏览器中宽度为767像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
如果使用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>
一切都会好起来的!
您仍然可以使用img-responsive，而不影响使用此样式类的其他图像。
你可以在这个标签前面加上section id/ div id/class来定义一个img被嵌套的顺序。这个自定义的img-responsive将只在该区域工作。
假设你有一个HTML区域定义为:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>
然后，你的CSS可以是:
section#work .img-responsive{
margin: 0 auto;
}
注意:这个答案与整体改变img-responsive的潜在影响有关。当然，中心块是最简单的解决方案。
<div class="text-align" style="text-align: center; ">
<img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>
你可以试试这个。
你可以在这里使用属性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>
尝试这段代码，它将工作的小图标也与bootstrap 4，因为没有中心块类是bootstrap 4，所以尝试这种方法，这将是有帮助的。你可以通过将。col-md-12设置为。col-md-8或。col-md-4来改变图像的位置，这取决于你。
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>
