css - 如何在移动设备上将我的专栏内容居中？

Question

这是我的代码:

 <div class="col-xs-12 col-sm-4 col-md-3  example nopadding"><img src="holder.js/292x180" class="img-responsive"></div>

在小型、中型和大型设备上，我对图像定位没问题。但是在移动设备上，我希望我的图像在行内居中。

我曾尝试使用“center-block”，但它只是将所有内容居中。我尝试专门为“xs”使用偏移量，但它并没有在屏幕宽度为 768 像素或更低的所有设备上产生一致的外观。你们还建议我做什么？

编辑:我意识到这段 CSS 可能很重要。这是我在基本 Bootstrap CSS 之上添加的唯一 CSS。

.nopadding {
填充:0!重要；
margin :0!重要；
}

Answer 1

您可以尝试使用媒体查询来定位 col-xs-12，然​​后才将图像居中:

@media screen and (max-width: 400px){
 .col-xs-12.example {
  text-align: center;
 }
}

删除 nopadding 类。