在容器内居中响应 DIV [英] Centering responsive DIVs within a container

问题描述

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

If you resize the screen the divs are responsive and move. When the right hand div drops below, it leaves space to the right of the screen. I want all the divs to automatically center instead of staying to the left

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

I created this JSFiddler to help explain but it doesn't allow me to post with message. Will post below.

有什么帮助吗?

推荐答案

使用浮动和居中非常困难.尝试使用 display:inline-block 代替并在包装父级上添加 text-align:center.

Using floats and centering is very difficult. Try using display:inline-block instead and add text-align:center on the wrapping parent.

JSfiddle 演示

修改 CSS

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;

}

这篇关于在容器内居中响应 DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！