将三个 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

嘿， float: center; 不起作用。 float property 没有这样的值。

用这个代替#content css

text-align: center;

希望有帮助。

Answer 2

检查这是不是你想要的：

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

请注意，ID 应该是唯一的，并且没有中心浮动之类的东西。要使 div 居中，您必须确保它相对于它的容器定位（这是我所知道的大多数浏览器的默认行为）并使用以下语法：

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

Answer 3

你总是可以这样做：

HTML：

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

CSS：

.contentbox {
      margin-left: auto;
      margin-right: auto;
      float: left;
      display: block;
      width: 250px;
      height: 250px;
      border: 1px dashed #999;  /* just for visuals */
      margin: 0 10px;  /* just for visuals */
}

作为一般做法，您肯定希望远离 ID，是否可以将它们与 javascript（jquery 等）库一起使用。而且这样更干净。