如何居中網格的網格？

爲了描述的細節問題，我不得不做出一些假設：如何居中網格的網格？

我有一個項目清單，其中長度是未知的（也可以是1，2或甚至50）
我想要在網格中顯示它們 - 連續的項目數是未知的（由用戶的顯示分辨率決定）。
每個項目的寬度都是相同的，並且固定爲250px。
項目間距應該通過顯示分辨率來確定，或者應該縮小容器的寬度。
我不要想用JS。

你可以在FoodGawker看到我想要做的。我正在使用2臺不同分辨率的顯示器。將我的瀏覽器從一個拖放到另一個時，它只是將更多的項目放在一行中，但所有內容仍然居中對稱。它也適用於JS禁用。

所以我知道這是可能的，我不知道如何去做。

我嘗試了很多變體的float：，display :,等等，但是無法使它工作。

下面的代碼是最接近我想要的 - 適用於2個內部div，但對於許多它不再居中。有任何想法嗎？

.center_wrapper { 
    background: grey; 
    padding: 10px; 
    text-align: left; 
    overflow: hidden; 
    display:inline-block; 
} 

.cards_wrapper { 
    background: red; 
    overflow: hidden; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    width: 90%; 

} 
.card { 
    background: blue; 
    width: 250px; 
    height: 250px; 
    margin: auto 20px; 
    display:inline; 
} 


<div class="cards_wrapper"> 
    <div class="center_wrapper"> 
     <div class="card"> 
      <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png"> 
     </div> 
     <div class="card"> 
      <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png"> 
     </div> 
    </div> 
</div>

enter image description here

for 10

來源

2012-11-20 gisek

聽起來flexbox的工作，但瀏覽器支持並不是很好。你可以嘗試使用'text-align：justify;'儘管.. –

使用inline-block和％margin

演示：http://jsfiddle.net/MadLittleMods/9SZDC/

.block 
{ 
    display: -moz-inline-stack; 
    display: inline-block; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; 

    width: 250px; 
    height: 100px; 
    background: #aaeeff; 

    margin: 1%; 
}

如果要居中塊，那麼你可以添加一個文本對齊到容器

.container 
{ 
    text-align: center; 
}

來源

2012-11-20 21:54:30 MLM

的text-align: left;從.center_wrapper卸下應該做的伎倆。

如所見here。

來源

2012-11-20 21:50:43 gotohales

如何居中網格的網格？

回答

相關問題