我发现this similar question但无法使其工作。水平中心在一个容器div内的两个div

我在我的CSS标记为“盒子”两米格的容器，我不能让他们的父母专区内居中（标记为我的CSS“包装”）

这里是我的代码：https://jsfiddle.net/jord8on/fjtq28g7/

CSS：

.wrapper { 
    display: inline-block; 
    margin: 0 auto; 
} 

.box { 
    display: inline-block; 
    width:370px; 
    height: 370px; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: top; 
}

任何帮助将不胜感激！

来源

2016-11-03 jord8on

你应该改变一些风格的包装，你会好：

.wrapper { 
    display: block; 
    text-align: center; 
}

https://jsfiddle.net/fjtq28g7/3/

编辑

如果，你的评论，Flexbox的仍是一个选项，你可以试试这个：

https://jsfiddle.net/fjtq28g7/7/

个唯一的实际变化是在包装：

.wrapper { 
    display: flex; 
    text-align: center; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    padding: 0 3%; 
}

来源

2016-11-03 20:10:12 daanvanham

#nailedit非常感谢你解答我的问题这个快速答案！ – jord8on

@jordazzle不客气:) – daanvanham

对你来说还有一个问题@daanvanham - 我如何将这两个“盒子”div放在每个div的左侧和右侧有相等数量的间距？那有意义吗？这里是一个图片（如果它被接受）http://take.ms/FEeuj➞我希望间距等于第一个“方块”等号空间左边的中间和等于第二个“右边的空格” “ – jord8on

#wrapper { 
    display: inline-block; 
    text-align: center; 
} 

.box { 
    display: table; 
    width:370px; 
    height: 370px; 
    margin: 0 auto; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: top; 
}

这应该为你做：D只是将显示属性更改为表，并给它一个自动边缘。很常见的情况

====编辑

考虑您的意见，这里是你应该做的：

.wrapper { 
    display: inline-block; 
    margin: 0px auto; 
    width: 100%; 
} 

.box { 
    display: table; 
    width:370px; 
    height: 370px; 
    margin: 0 auto; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: top; 
} 

.box-container { 
    width: 50%; 
    float: left; 
}

然后就是换你.box的分度，.box的容器股利。这样你有两个50％宽的容器，你的盒子居中居中。

https://jsfiddle.net/9mzmu6r7/4/

来源

2016-11-03 19:53:05 leofontes

感谢您的超级快速响应！我尝试了你的建议，但第二个框包装到下一行，而不是集中在与其他div“盒子”相同的水平https://jsfiddle.net/jord8on/9mzmu6r7/ – jord8on

@jordazzle我编辑了我的答案，现在检查;） – leofontes

Ooooh！这看起来不错@leofontes！唯一的挑战是，当屏幕宽度变得太小时，我希望右侧的容器可以包装到下一行。 @daanvanham提供了这个工程的例子！ https://jsfiddle.net/fjtq28g7/3/（我唯一希望得到的例子就是像你的那样间隔出来！ – jord8on

Flexbox的解决方案

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.box { 
 
    width: 370px; 
 
    height: 160px; 
 
    margin: 5px; 
 
    background: #aef; 
 
}

<div class="wrapper"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
</div>

注：如果需要，您supported browsers添加柔性供应商前缀。

来源

2016-11-03 20:02:13

Flexbox的是去

.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
} 
 

 
.box { 
 
    width:370px; 
 
    height: 370px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    vertical-align: top; 
 
}

显示器挠性会并排放置的div侧的方式，并与证明的内容，你以他们为中心。从childs删除显示行内块的工作。使用mz-webkit等支持较老的浏览器

来源

2016-11-03 20:15:21

感谢您对此的看法。它很好地工作，但不幸的是，当屏幕宽度变小时，我的第二个“盒子”没有包装到下一行。 @daanvanham提供了这个工程的例子！ jsfiddle.net/fjtq28g7/3 – jord8on

只需添加flex-flow：row wrap;在证明内容之前，你有：D –

水平中心在一个容器div内的两个div

回答

编辑

Flexbox的解决方案

相关问题