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


当前回答

尝试这段代码,它将工作的小图标也与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>

其他回答

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

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


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

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

尝试这段代码,它将工作的小图标也与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>

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

简单地把所有的图片缩略图放在row/col div中,就像这样:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

一切都会好起来的!

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}