Question

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

我需要有三个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;
}

Answer 1

text-align:center;声明需要位于最外层的div上，例如frontnav。

Answer 2

将最后一条规则更改为：

.frontboxes {
    margin: 6px auto;
}

并删除float: left; s。

Answer 3

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

来居中

margin: 0px auto;

如何将三个Div中心放在另一个Div内

3 个答案: