如何居中网格的网格？

为了描述的细节问题，我不得不做出一些假设：如何居中网格的网格？

我有一个项目清单，其中长度是未知的（也可以是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

如何居中网格的网格？

回答

相关问题