Comment centrer trois Div à l'intérieur d'une autre Div

Question

cela a essayé ma patience pendant environ une heure, donc je pensais que je demanderais.

J'ai besoin d'avoir trois divs, centrés à l'intérieur d'un autre div qui est à l'intérieur d'un autre div lol. Voici à quoi ressemble le code que j'ai.

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

élément div ne peut être centre en fixant la marge propriété css

margin: 0px auto; 

Answer 2

La déclaration text-align:center; doit être sur la div plus à l'extérieur, à savoir frontnav dans votre exemple.

Answer 3

Modifier la dernière règle:

.frontboxes { 
    margin: 6px auto; 
} 

et enlever les float: left; s.