Cómo centrar divisiones flotantes en un contenedor

Question

¿Es posible centrar divs flotantes en un contenedor y, en caso afirmativo, cómo?

Por ejemplo, tengo una página con un contenedor div que contiene muchos divs flotados (izquierda) de tamaño variable (generados dinámicamente). Los divs se desbordan regularmente en la línea siguiente, pero nunca se centran en el contenedor div, sino que se alinean con la izquierda. Se ve así:

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

Mientras que me gustaría que los divs flotados centradas en el contenedor de la siguiente manera:

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

Gracias,

DLiKS

Answer 1

Es posible. Usando http://www.pmob.co.uk/pob/centred-float.htm y http://css-discuss.incutio.com/wiki/Centering_Block_Element como fuente.

aquí es un violín que demuestra el concepto, utilizando el código HTML y CSS desde abajo: 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> 

Este es el CSS mínimo necesario para el efecto:

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

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

#inner > li { 
    float: left; 
} 

Explicación:

Comience con solo la regla li { float: left; }. Luego envuelva los flotadores en el left: 50%; relative position, de modo que el borde izquierdo del cuadro <ul> esté en el centro horizontal de la página, luego use las reglas en #outer para ajustarlo correctamente de modo que el centro de #inner esté alineado con la página.

Answer 2

Un buen truco para centrar el elemento "div" es establecer "margin: auto", los centrará.

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

calcular la cantidad total de ancho de espacio en la pantalla que el diseño deseado ocupará a continuación, hacer que la matriz a la misma anchura y aplicar margen: 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>