0

这已经考验了我大约一个小时的耐心，所以我想我会问。

我需要三个 div，以另一个 div 为中心，另一个 div 位于另一个 div 中，哈哈。这是我的代码的样子。

HTML

<div id="frontnav">
   <div id="front1" class="frontboxes">
      <h2>Gold</h2>
   </div>
   <div id="front2" class="frontboxes">
      <h2>Green</h2>
   </div>
   <div id="front3" class="frontboxes">
      <h2>Blue</h2>
   </div>
</div>

CSS

/*  FRONT PAGE BOXES */

#frontnav {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    transition: all 2s;
    -moz-transition: all 2s;
 /* Firefox 4 */
    -webkit-transition: all 2s;
 /* Safari and Chrome */
    -o-transition: all 2s;
 /* Opera */;
}

#front1 {
    text-align: center;
    float: left;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 19px #615D69;
}

#front2 {
    text-align: center;
    float: left;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 19px #615D69;
}

#front3 {
    text-align: center;
    float: left;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 19px #615D69;
}

.frontboxes {
    margin: 6px;
}
4

3 回答 3

0

text-align:center;声明需要在最外面的 div 上，即在frontnav您的示例中。

于 2012-04-13T00:29:40.363 回答
0

将最后一条规则更改为：

.frontboxes {
    margin: 6px auto;
}

并删除 float: left;s。

于 2012-04-13T00:34:48.607 回答
0

div 元素只能通过将 margin css 属性设置为居中

margin: 0px auto;
于 2012-04-13T00:36:47.980 回答