¿Cómo centrar múltiples divs horizontalmente?
Nuestra primera aproximación a este problema va a ser un simple:
[cce]
float:left;
[/cce]
Cómo eso no funciona en lo absoluto tenemos que recurrir a google. La respuesta más común en google es algo así como:
[cce]
.parent
{
text-align:center;
display: block;
border: 1px solid red;
}
.child
{
display: inline-block;
border: 1px solid black;
width: 100px;
}
[/cce]
donde parent es la clase del div principal y child la clase de los divs que vamos a centrar. Luego de algunas pruebas llegué a la conclusión de que esto solamente funciona (+/-) en FF, Chrome e IE9. En IE8 falla miserablemente.
4 horas después mi solución fue más o menos la misma que al comienzo pero con unos detalles adicionales:
[cce]
.imyourfather {
text-align: left;
vertical-align: middle;
margin: 0px auto;
}
.child {
margin-right: 3px;
float:left;
}
[/cce]
Por qué esto tiende a fallar al comienzo y luego de 4 horas no deja de funcionar no tengo idea realmente. css+IE8 es un potro difícil de domar, no tengo paciencia para esperar el día en que ya no tengamos que darle más soporte a ese engendro del demonio. Yo creo que fue IE lo que enloqueció a los personajes de Rabbits.
02-05-2013 a las 7:18 am
Yo siempre he resuelto con #obi { margin: 0 auto 0; }. Prueba a ver qué tal.
02-05-2013 a las 10:59 am
Sí eso centra un div pero el caso del que hablo es múltiples div’s , es decir varios div’s.