在容器div中水平居中两个div

I found this similar question but could not get it to work.

我发现了这个类似的问题,但无法让它发挥作用。

I have two div containers labelled in my CSS as "box" and I can't get them to be centered within their parent div (labelled as "wrapper" in my CSS)

我有两个在我的CSS中标记为“盒子”的div容器,我不能让它们在父div中居中(在我的CSS中标记为“wrapper”)

Here's my code: https://jsfiddle.net/jord8on/fjtq28g7/

这是我的代码: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;
}

Any help would be greatly appreciated!

任何帮助将不胜感激!

4 个解决方案

#1

You should change some styling for the wrapper and you'll be good:

你应该为包装器改变一些样式,你会很好:

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

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

EDIT

If, by your comment, flexbox is still an option, you could try this:

如果您的评论仍然是一个选项,您可以试试这个:

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

The only actual changes are in the wrapper:

唯一的实际更改是在包装器中:

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

#2

#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;
}

That should do it for you :D Just changed the display property to table, and gave it margin auto. Pretty common situation

这应该为你做:D只是将显示属性更改为表,并给它自动保证金。很常见的情况

====EDIT

Given your comment, here is what you should do:

鉴于您的评论,这是您应该做的:

.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;
}

And then just wrap your .box div with the .box-container div. That way you have two 50% wide containers, and your box centered in the middle.

然后用.box-container div包装你的.box div。这样你就有两个50%宽的容器,你的盒子位于中间。

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

#3

flexbox is the way to go

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

display flex will put divs side by side, and with justify content, you center both of them. Remove the display inline-block from childs to work. use mz-webkit, etc for older supporting browser

display flex将把div放在一起,并且有合理的内容,你可以将它们都放在中心位置。从子项中删除显示内联块以进行工作。使用mz-webkit等为旧的支持浏览器

#4

Flexbox solution

.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>

Note: Add flex vendor prefixes if required by your supported browsers.

注意:如果您的支持的浏览器需要,请添加flex供应商前缀。