我使用Bootstrap 3做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小(500x500)，在浏览器中宽度为767像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
到目前为止，接受的最佳解决方案似乎是<img class="center-block"…/ >。但是没有人提到过中央块是如何工作的。
以Bootstrap v3.3.6为例:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
<img>的display默认值为inline。Value block将一个元素显示为块元素(如<p>)。它从一个新的行开始，并占用整个宽度。通过这种方式，两个边距设置让图像水平地保持在中间。
其他回答
简单地把所有的图片缩略图放在row/col div中，就像这样:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
一切都会好起来的!
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
到目前为止，接受的最佳解决方案似乎是<img class="center-block"…/ >。但是没有人提到过中央块是如何工作的。
以Bootstrap v3.3.6为例:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
<img>的display默认值为inline。Value block将一个元素显示为块元素(如<p>)。它从一个新的行开始，并占用整个宽度。通过这种方式，两个边距设置让图像水平地保持在中间。
如果你使用Bootstrap 3，只需使用.text-center类。
<div class="text-center">
<img src="..." alt="..."/>
</div>
注意:这对img-responsive不起作用
您仍然可以使用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的潜在影响有关。当然，中心块是最简单的解决方案。
