css - 3 つの Div を別の Div の中央に配置する方法

Question

これは約1時間私の忍耐を試みてきたので、私は尋ねようと思いました.

別のdiv内にある別のdivの中心に3つの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

最後のルールを次のように変更します。

.frontboxes {
    margin: 6px auto;
}

を削除し float: left;ます。

Answer 2

div要素は、margincssプロパティを次のように設定することによってのみ中央に配置できます。

margin: 0px auto;

Answer 3

宣言は、最もtext-align:center;外側のdiv、つまりfrontnavあなたの例にある必要があります。