0

我有一个容器 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 中居中这三个内容框。

非常感谢，亚伦布鲁尔

4

3 回答 3

2

嘿， float: center; 不会工作。float 属性没有这样的值。

将其用于#contentcss

text-align: center;

希望有帮助。

于 2011-02-17T04:46:40.320 回答
2

检查这是否是您想要的：

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

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

.something {
  margin: 0 auto;
  clear: both; // instead of float
}
于 2011-02-17T04:46:50.300 回答
1

你总是可以做这样的事情：

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 等）库一起使用。而且这样更干净。

于 2011-02-17T04:59:15.143 回答