响应式图像对齐中心引导3

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

当前回答

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

其他回答

你可以在这里使用属性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" />

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

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

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

一切都会好起来的!

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

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

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

推荐文章