Question

我有一个容器div，并希望在中心div中放置三个div标签，我有正确的XHTML，但我遇到的麻烦是，将div中的三个div居中。

我现在将展示代码。

XHTML 1.0 Transitional（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居中，你必须确保它相对于它的容器（这是我所知的大多数浏览器的默认行为），并使用followinf语法：

.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等）库。再加上它更干净。

将Div中的三个Div标签对齐

3 个答案: