soy Kseso y esto EsCSS

Centrar cajas flotantes sin ancho definido. Por @Oloman

"Un sistema para centrar elementos que incluyen float, pero que no tienen un width definido, cosa que nos impide usar márgin: auto. El truco es usar una caja contenedora auxiliar y desplazar ambas un 50%, cada una en un sentido distinto." Por @oloman de www.oloblogger.com/

Centrar cajas flotantes sin ancho definido. Por @Oloman

✎ 8
COLABORACIÓN AUTOR INVITADO

Este artículo está escrito por @Oloman, alguien a quién no conozco mas que por su blog y desde hace muy pocas semanas. Ayer, en lo que fue una enajenación mental, espero que pasajera, y tras un pequeño (pequeñísimo realmente dado el medio) intercambio de ideas en Twitter sobre el centrado, acordamos intercambiar los posts que cada uno habíamos preparado para hoy.

Centrar cajas flotantes sin ancho definido

Centrar elementos de lista a los que previamente se le ha dado la propiedad float -por ejemplo para formar un menú- es uno de esos problemas que me parecía irresoluble. Sin embargo si uno busca, normalmente encuentra y así ha sido en esta ocasión.

Hay varias referencias y la técnica es la misma, así que sólo cito a Search This que es dónde vi la entrada más antigua.

Vamos primero a dejar claro que el habitual truco de usar margin: 0 auto; no funciona con los elementos flotantes, ya que estos van a derecha o izquierda (según el valor que se le asigne), ignorando los márgenes que no hayan sido definidos con un valor concreto. Y esto no lo podemos hacer si a priori no sabemos qué ancho va a ocupar.

Y ahora formemos una caja que contendrá varias capas span que flotan dentro de ella a la izquierda. El código básico sería este:

<div class="cajademo"> <span>Uno</span> <span>Cuatro</span> <span>Seis</span> <span>Cuatrocientosveintiocho</span> </div> <div class="clear"></div> .cajademo { margin: 0; padding: 10px 10px 20px 5px; } .cajademo span { float: left; margin: 0 5px; padding: 4px; background: #990000; color: #eee; border: 2px solid #333; } .clear { clear: left; height: 1px; margin-top: -1px; }

Eso nos daría este resultado en el que vemos que efectivamente, todo se va a la izquierda siguiendo el empuje de ese float:left.

Uno Cuatro Seis Cuatrocientosveintiocho

Y ahora va el truco. Lo primero que hacemos es añadir una caja exterior también flotante pero a la que adicionalmente añadimos un posicionamiento relativo y un desplazamiento del 50%.

<div class="cajademo2-auxiliar"> <div class="cajademo2"> <span>Uno</span> <span>Cuatro</span> <span>Seis</span> <span>Cuatrocientosveintiocho</span> </div> .cajademo2-auxiliar { float: left; position: relative; left: 50%; } .cajademo2 { margin: 0; padding: 10px 10px 20px 5px; } .cajademo2 span { float: left; margin: 0 5px; padding: 4px; background: #990000; color: #eee; border: 2px solid #333; } .clear { clear: left; height: 1px; margin-top: -1px; }
Uno Cuatro Seis Cuatrocientosveintiocho

Con esto hemos conseguido que todo el bloque se muestre a partir del centro, que evidentemente no es lo que pretendíamos, así que para compensar hacemos lo mismo con el contenedor primitivo, añadiendo un position:relative y un desplazamiento del 50%, pero este con un valor negativo. Así todo irá dónde queremos.

<div class="cajademo3-auxiliar"> <div class="cajademo3"> <span>Uno</span> <span>Cuatro</span> <span>Seis</span> <span>Cuatrocientosveintiocho</span> </div> .cajademo3-auxiliar { float: left; position: relative; left: 50%; } .cajademo3 { margin: 0; padding: 10px 10px 20px 5px; position: relative; left: -50%; } .cajademo3 span { float: left; margin: 0 5px; padding: 4px; background: #990000; color: #eee; border: 2px solid #333; } .clear { clear: left; height: 1px; margin-top: -1px; }
Uno Cuatro Seis Cuatrocientosveintiocho

Y de manera similar a como hemos hecho anteriormente con varios span, también se puede hacer lo mismo con listas, que es quizás dónde más provecho se le puede sacar al truco cuando se utilizan estas para formar un menú horizontal.

<div class="contaux"> <ul class="menucent"> <li>Uno</li> <li>Cuatro</li> <li>Seis</li> <li>Cuatrocientosveintiocho</li> </ul> </div> <div class="clear"></div> .contaux { float: left; position: relative; left: 50%; } ul.menucent { list-style-type: none; margin: 0; padding: 10px 10px 20px 5px; position: relative; left: -50%; } ul.menucent li { float: left; margin: 0 5px; padding: 4px; background: #990000; color: #eee; border: 2px solid #333; } .clear { clear: left; height: 1px; margin-top: -1px; }
  • Uno
  • Cuatro
  • Seis
  • Cuatrocientosveintiocho

Ah... y funciona al menos desde IE8.

Sobre el autor de este artículo

Por @Oloman
Autor de Oloblogger "Blogger para torpes y para no tanto".
Diseñador y otras cosas más, así que visita su página.
Este artículo se publica bajo Licencia Creative Commons (CC BY-NC 3.0) y no bajo la beerware

Actualización y pago por colaboración

Mi artículo en el intercambio con Oloblogger fue: Alineación simultánea: 3 dobles centrados de cajas en número y tamaño dispares.
Así que pasar a verlo puede ser una buena forma de dar las gracias a Oloman.