html - 2个并排的div居中？

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 元素的使用