如何将中心网格对齐

Question

我已经设置了一个网格布局，可以在缩小页面大小时响应并堆叠。

但是，我该如何居中三个div？你会注意到，在全面扩张时，他们偏离了中心。

http://www.naturettl.com/shop/

谢谢。

Answer 1

你可以用很多方法做到这一点，这些方法之一是display:inline：

div.Box { 
    width: 20%; 
    height: 250px; 
    background: red; 
    display: inline-block; 
} 

#Container { 
    text-align: center; 
} 

JSFiddle（这与percent宽度）

JSFiddle（这与px宽度）

div.Box { 
    width: 200px; 
    height: 250px; 
    background: red; 
    display: inline-block; 
} 

另一种方法是制作div.Box float: left;然后给父母一个固定的width然后加上margin: auto使其居中。

JSFiddle

div.Box { 
    width: 200px; 
    height: 250px; 
    background: red; 
    float: left; 
    margin: 0 5px 0 5px; 
} 

，但如果你想让它响应你应该写一些media查询其他分辨率。