CSS Tip: cómo centrar capas con float left

Problema:

Tenemos un div contenedor, que contiene varios div elemento. Y queremos que esos elementos estén centrados en el contenedor, pero a la vez, que aparezcan en la misma linea, horizontalmente.

Como queremos que esos elementos vayan colocándose juntos horizontalmente, debemos ponerles el atributo float con valor “left”.

Pero a su vez, queremos que esos elementos estén centrados en la capa que los contiene. ¿Cómo lo hacemos? Al “flotar” a la izquierda, no sirve que el div contenedor tenga “text-align:center” ni “margin:0 auto”, que es lo primero que se nos ocurre. Se van por defecto a la izquierda del div contenedor.

Además, los elementos van a variar de número. No podemos pensar sólo en cómo alinear 3 elementos, o los que sean. Pueden ser “n” elementos. Si no, también sería sencillo, dando un margen izquierdo al primer elemento, para separarlo y centrarlo manualmente.

Tampoco me sirve usar tablas. Es decir, puede valer, pero esto es un tip de CSS, no queremos usar tablas. Las tablas sólo se usan para mostrar datos.

Pasemos a la solución.

Solución:

Después de mucho “jugar” con posiciones relativas, porcentajes, márgenes… la solución es muy fácil.

El div contenedor debe tener esta línea:

display:table

Y ya está, así de fácil. Eso hace que se centren todos los elementos de su interior, da igual el número que sean, y si van variando.

En concreto, el código para el dibujo que he puesto, es:


.contenedor{
display:table; /* ¡La clave de todo! */
text-align:left;
margin:0 auto;
}

.elemento{
float:left; /* importante darle este atributo */
width:50px; /* importante darle una anchura */
margin-right:10px; /* esto ya es optativo */
border:1px solid #ccc; /* esto ya es optativo */
}

Anuncios

18 pensamientos en “CSS Tip: cómo centrar capas con float left

  1. jet

    por que siento que te debo la vida hermano!! wooow mejor explicado jamaz! me salvaste la vida y de paso! finalizaste la busqueda de mas de 6 meses haciendo pruebas!!!

    Responder
  2. javier

    Joaquín, mira, son las 5.26 de la mañana, y te puedo asegurar que es la cuarta noche que me da esta hora, buscando la solución a este problema. He dado muchas muchas muchas vueltas por internet, hasta que he dado contigo. Tio, MUCHIIIIIIIIIIIIIIISIMAS GRACIAS!!, de verdad, me has solucionado esta jodienda que me tenía loquísimo. Gracias.

    Responder
    1. Joaquín Autor de la entrada

      Jaja, gracias Javier… la verdad es que a veces hay cosas que parece que deberían ser sencillas (alinear unos div), que cuesta mucho encontrar la manera.

      Me alegro de haberte ayudado, sobre todo si te pegabas toda la noche buscando 😛

      Responder
  3. Javier Villafaina

    Muchísimas gracias por tus tutoriales.
    He podido completar este tutorial con éxito, pero hay una cosa que no soy capaz de hacer.
    Me gustaría poder centrar el menú en la vista para Pc, te agradecería muchísimo si me puieras decir como puedo hacerlo.

    Muchas gracias de nuevo.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s