Centro allineamento figlio multiplo DIV

Question

Sto trovando un po 'di confusione lavorando su questo problema.

Ho genitore DIV e 3/più figlio DIV.

Il DIV principale è allineato al centro e il DIV secondario deve essere a sinistra, ma deve essere allineato al centro.

CSS contiene,

.center { 
    float:left; 
    height:250px; 
    width:15%; 
    margin: 0 auto; 
    border: 1px solid black; 
} 

I have a sample of the code link here...

Answer 1

Se si desidera allineare orizzontalmente i propri elementi centralmente, non farlo fluttuare.

cambiare il modo in cui vengono visualizzati a inline-block e allinearle al centro modificando lo stile text-align del genitore:

#parent { 
 
    text-align:center; 
 
    height:450px; 
 
    width:75%; 
 
    border:1px solid blue; 
 
} 
 
.center { 
 
    display:inline-block; 
 
    height:250px; 
 
    width:15%; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
}

<div id="parent"> 
 
    <div id="child1" class="center"></div><!-- 
 
--><div id="child2" class="center"></div><!-- 
 
--><div id="child3" class="center"></div> 
 
</div>

Assicurarsi di non avere spazi bianchi o ritorni a capo tra i tuoi figli <div> s (nel tuo HTML, ovvero) o commentalo. Ora che si tratta di elementi in linea, questo spazio bianco verrà interpretato come uno spazio.

Answer 2

margini automatici non verranno applicati ad un elemento che ha un galleggiante applicata. La rimozione del float dovrebbe iniziare ...