在容器中居中响应DIV

Question

如果您调整屏幕大小，div会响应并移动。当右手div下方时，它会在屏幕右侧留出空间。我希望所有div自动居中，而不是留在左边

我创建了这个JSFiddler以帮助解释，但它不允许我发布消息。将在下面发布。

任何帮助？

Answer 1

使用浮动和居中是非常困难的。请尝试使用display:inline-block，并在包装​​父级上添加text-align:center。

JSfiddle Demo

修改 CSS

#wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align:center; /* add this */
}

.box-container { 
    background: none repeat scroll 0 0 #FFFFFF;
    //float: left; /*tremove this */
    display: inline-block; /* add this */
    margin: 50px 5px 50px;
    overflow: hidden;
    position: relative;
    width: 185px;
    box-shadow: 0px 0px 5px #BBBBBB;
    text-align:center;
    text-decoration: none;

}