如何將移動設備上的列的內容居中？

<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

回答