2并排divs居中？

Question

我有2个div，我想并排并在页面中央对齐？

HTML：

<div id="box"></div>
<div id="box"></div>

CSS：

#box
{
width: 450px;
color: #ffffff;
height: 500px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
float:left;
margin-right:15px;}

这就是它现在的样子：

（我不能张贴照片，因为我没有10个代表抱歉！）但我希望它们在导航栏下面并对齐。谢谢。

Answer 1

您需要的是使用inline-block而不是float，它允许您在父级上使用text-align属性。试试这个：

.box {
  /*float:left; Remove this*/
  display:inline-block; /*Add this*/
}

_{由于ID必须是唯一的，我使用.box在div上添加该类}

在父母使用上：

body {
  text-align:center;
}

_{我在这种情况下使用body我没有看到任何其他父级，但是改为真实的}

检查此演示http://jsfiddle.net/WJfx5/

您也可以阅读 This Article 了解inline-block元素的使用情况

Answer 2

将这2个div放在另一个大div中，并添加margin：0 auto;它和宽度。

<div class="bigdiv">
  <div class="box"></div>
  <div class="box"></div>
</div>

.bigdiv { margin:0 auto; width: 930px }
.box:last-child {margin-right: 0px;}

Answer 3

围绕这些div创建一个包装器，如

<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

然后用css

#wrapper {
     text-align: center;
     width: ??; //add yours
     height: ??; //add yours
}

仅供参考： id应该是唯一的

更新

.box {
    width: 450px;
    color: #ffffff;
    height: 500px;
    display: inline-block;    
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    background-color:#666;
    border-radius:15px;    
}

#wrapper{
    text-align: center;
}

JSFiddle