如何居中网格

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查询。