如何将移动设备上的列的内容居中？

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

在小型，中型和大型设备，我没事与形象定位。但在移动设备上，我希望我的图像在该行内居中。

我试图使用“中心块”，但只是集中了一切。我尝试使用专门用于“xs”的偏移量，但它没有在屏幕宽度为768像素或更低的所有设备上产生一致的外观。你们还会建议我做什么？

编辑：我意识到这块CSS可能很重要。这是我在Bootstrap CSS基础上添加的唯一CSS。

.nopadding { padding: 0 !important; margin: 0 !important; }

你可以在http://bootply.com/new –

，你可以尝试使用媒体查询为目标的COL-XS-12和居中的图像才：

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

删除nopadding类。

2014-01-16 09:33:25 Mark

上进行演示有没有办法做到这一点，同时保持nopadding类？我希望我的大额赠款中的其他内容能够完全填充父元素。 – user1787531

只需创建一些其他媒体查询即可获得正确的效果。谢谢！ – user1787531

你可以离开nopadding课程，我认为这是一个课程，只是为了对齐你尝试过的图像。 – Mark

，因为你没有提供演示我猜你真正想要的东西。

这是一个演示我怎么想你想要什么和做什么。 Fiddle Demo

为了解释，我将图像从内联更改为块元素，比您可以使用边距和自动将它保持在中心位置。

.img-responsive { 
    display: block; 
    margin: 0 auto; 
}

2014-01-16 08:24:57 Sven

回答