将响应式 DIV 置于容器内居中

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

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

有什么帮助吗？

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

JSfiddle 演示

Amended 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;

}