css - 将一个 Div 内的三个 Div 标签居中

Question

我有一个容器 div，想在中心 div 中放置三个 div 标签，我的 XHTML 是正确的，但我遇到的问题是，嗯，将三个 div 在 div 中居中。

我现在将展示代码。

XHTML 1.0 过渡 (HTML)

<div id="container">  
<div id="header">
</div>
<div id="content">
  <div id="contentbox">
  </div>
    <div id="contentbox">
  </div>
    <div id="contentbox">
  </div>
</div> 
</div>

级联样式表 (CSS)

#container {
  width: 900px;
  height: inherit;
  margin: 30px auto;
}

#content {
  float: center;
  width: inherit;
  height: inherit;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

#header {
  margin: 0 auto;
  background-image: url(images/logo.png);
  background-position: center;
  width: 250px;
  height: 250px;
}

#contentbox {
  margin-left: auto;
  margin-right: auto;
  float: left;
  display: block;
  width: 250px;
  height: 250px;
  background-image: url(images/contentbox.png);
}

要查看我正在尝试做的事情的示例，请访问 http://www.noxinnovations.com/portfolio/hfc/

我想知道如何在内容 div 中将这三个内容框居中。

非常感谢， 亚伦·布鲁尔

Answer 1

检查这是否是您想要的:

http://jsfiddle.net/65WHf/1/

请注意，ID 应该是唯一的，并且没有中心 float 这样的东西。要使一个 div 居中，您必须确保它相对于它的容器定位(据我所知这是大多数浏览器的默认行为)并使用以下语法:

.something {
  margin: 0 auto;
  clear: both; // instead of float
}