Come centrare i div flottati in un contenitore

Question

È possibile centrare i div flottati in un contenitore e in tal caso come?

Ad esempio, ho una pagina con un contenitore div contenente lotti di variabili (generate dinamicamente) flottate (a sinistra) div. I tuffi superano regolarmente la linea successiva ma non sono mai centrati nel div contenitore, ma allineati con la sinistra. Ecco come si presenta:

---------------------------- 
-       - 
- +++ +++++ ++++ ++  - 
- +++ +++++ ++++ ++  - 
-       - 
- ++ ++++++ +++ +  - 
- ++ ++++++ +++ +  - 
-       - 
---------------------------- 

Mentre vorrei div galleggiavano centrati nel contenitore come questo:

---------------------------- 
-       - 
- +++ +++++ ++++ ++ - 
- +++ +++++ ++++ ++ - 
-       - 
- ++ ++++++ +++ + - 
- ++ ++++++ +++ + - 
-       - 
---------------------------- 

Grazie,

DLiKS

Answer 1

E 'possibile. Utilizzo di http://www.pmob.co.uk/pob/centred-float.htm e http://css-discuss.incutio.com/wiki/Centering_Block_Element come origine.

Qui è un violino a dimostrazione del concetto, utilizzando il codice HTML e CSS da sotto: https://jsfiddle.net/t9qw8m5x/

<div id="outer"> 
    <ul id="inner"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 2 with long text</a></li> 
     <li><a href="#">Button 3</a></li> 
    </ul> 
</div> 

Questo è il CSS minimo necessario per l'effetto:

#outer { 
    float: right; 
    position: relative; 
    left: -50%; 
} 

#inner { 
    position: relative; 
    left: 50%; 
} 

#inner > li { 
    float: left; 
} 

Spiegazione:

Inizia con la sola regola li { float: left; }. Quindi sposta i float nello left: 50%; relative position, in modo che il bordo sinistro della casella <ul> si trovi nel centro orizzontale della pagina, quindi utilizza le regole in #outer per regolarlo correttamente in modo che il centro di #inner sia allineato alla pagina.

Answer 2

Un bel trucco per centrare l'elemento "div" è quello di impostare "margine: auto", che li centrerà.

Answer 3

<div id='contain'><center><div id='content'>qwerty</div></center></div> 

O

<div id='contain'><div id='content'>qwerty</div></div> 

<style type='text/css'> 

#content { 

    width:200px; 

    height:200px; 

    margin:auto; 
    /* margin:auto; requires width and i think height to be defined in nearly all browsers */ 

    }</style> 

Answer 4

calcolare la quantità totale di larghezza spazio schermo che il layout desiderato occuperà poi il genitore la stessa larghezza e applicare margin: auto.

.outer { 
 
    /* floats + margins + borders = 270 */ 
 
    max-width: 270px; 
 
    margin: auto; 
 
    height: 80px; 
 
    border: 1px; 
 
    border-style: solid; 
 
} 
 

 
.myFloat { 
 
    /* 3 floats x 50px = 150px */ 
 
    width: 50px; 
 
    /* 6 margins x 10px = 60px */ 
 
    margin: 10px; 
 
    /* 6 borders x 10px = 60px */ 
 
    border: 10px solid #6B6B6B; 
 
    float: left; 
 
    text-align: center; 
 
    height: 40px; 
 
}

<div class="outer"> 
 
    <div class="myFloat">Float 1</div> 
 
    <div class="myFloat">Float 2</div> 
 
    <div class="myFloat">Float 3</div> 
 
</div>