在容器中居中响应 DIV

Question

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

我创建了这个 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;

}