Múltiples divisores flotantes centrados en un diseño líquido

Tengo una idea para un diseño que me gustaría usar, pero no puedo hacer que funcione correctamente. Espero que alguien aquí pueda ayudar ya que he pasado horas buscando.Múltiples divisores flotantes centrados en un diseño líquido

El diseño es así.

Un envoltorio div alberga 6 divs para niños. Esas divisiones secundarias deben centrarse en TODAS las veces independientemente del tamaño de la envoltura div.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

El problema es cuando el navegador se cambia el tamaño más pequeño y una caja se cae en la línea de debajo de las cajas será encendida la izquierda, mientras que yo quiero que sean siempre centrados. ¿Es posible usar CSS puro o necesito usar algo de JQR?

Fuente

2010-10-12 Craig Ward

Nunca se centran para mí utilizando su código? –

Probablemente la solución más fácil es si quita el flotador: estilo izquierdo de los cuadros y cambie la propiedad de visualización a bloque en línea. Entonces todo lo que necesita hacer es alinear texto: centrar en el contenedor.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body>

Puede probar el código aquí: http://jsbin.com/uqamu4/edit

Fuente

2010-10-12 10:03:58

Probablemente la mejor solución, pero no funcionará en IE6 y 7 –

Hola Viktor, El problema con eso es que las cajas no se envuelven. Quiero que esta pantalla funcione en cualquier dispositivo. Por ejemplo, una computadora portátil normal probablemente mostrará 3 cajas una al lado de la otra, pero un iphone simplemente mostrará una encima de la otra. Pero si alguien cambia la ventana gráfica para que golpee un cuadro en la siguiente línea, aún debe centrar todas las casillas –

En realidad, ignórame. Parece que funciona, pero solo muestra 2 al lado del otro en el momento en que puedo cambiar. Saludos :) –

Esto no funcionará en IE 8 o menos, no saben aproximadamente 9, pero dado que su uso de max-width y min-width, que no trabajan allí tampoco Lo publicaré de todos modos.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; } 
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;} 

</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

Fuente

2010-10-12 10:05:02

Funcionará en IE8, pero no 7 –

no funcionó en mi IE8 ... –

Usted podría utilizar text-align: center en el envoltorio y display: inline-block de las cajas para que se comportan como elementos de texto normales que se centran no importa qué.

Advertencia: No funciona en IE6 e IE 7. Obras en Chrome y FF

jsFiddle here.

Fuente

2010-10-12 10:05:45

La solución que funcionó para mí:

<style> 
    body { 
     /* To center the list */ 
     text-align: center; 
    } 

    #wrapper { 
     /* To reset 'text-align' to the default */ 
     text-align: left; 

     display: inline; 
    } 

    .box { 
     display: inline-block; 
    } 
</style>

Fuente

2014-07-13 18:50:49 Blackbird

Múltiples divisores flotantes centrados en un diseño líquido

Respuesta

Cuestiones relacionadas