如何中心的div的网格？ [英] How to center a grid of divs?

问题描述

要详细描述这个问题，我必须做一些假设：

1. 我有一个项目列表，未知（可以是1,2或甚至50）


2. 我想在网格中显示它们 - 行中的项目计数未知（由用户的显示分辨率决定）。


3. 每个项目的宽度都是相同的，并固定为250像素。


4. 项目间距应由显示分辨率决定，否则容器的宽度应为

您可以在

  .block 
 {
 display：-moz-inline-stack; 
 display：inline-block; 
 vertical-align：top; 
 zoom：1; 
 * display：inline; 
 
 width：250px; 
 height：100px; 
 background：#aaeeff; 
 
 margin：1％; 
} 
  

如果要将块居中，则可以添加text-align到容器

  .container 
 {
 text-align：center; 
} 
  

To describe the problem in details I'll have to make a few assumptions:

1. I have a list of items, which length is unknown (it can be 1, 2 or even 50)
2. I want to display them in a grid - the items count in a row is unknown (determined by user's display resolution).
3. Every item's width is the same and is fixed to let's say 250px.
4. Items spacing should be determined by display resolution or the container's width should be shrunk.
5. I don't want to use JS.

You can see exactly what I want to do at FoodGawker. I'm using 2 monitors with different resolutions. When drag and drop my browser from one to another it just puts more items in a row, but everything is still centered and symmetrical. It works also with JS disabled.

So I know it's possible, what I don't know is how to do it.

I tried many variations of float:, display:, etc, but couldn't make it work.

The code below is the closest to what I want - works fine for 2 inner divs, but for many it's no longer centered. Any ideas?

.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>

解决方案

Use inline-block and a % margin

Demo: 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%;
}​

If you want to center the blocks then you can add a text-align to the container

.container
{
    text-align: center;
}

这篇关于如何中心的div的网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！