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; }

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.

Comentarios: 8

  1. Definitivamente usar inline-block + text-align es mucho más simple y semántico...

    Aunque de todas maneras en tu ejemplo yo sería más partidario de hacer algo como:

    .hijo + .hijo {margin-left: 1rem}

    Por eso de que es más corto que letter-spacing, y no me gusta hacer y luego deshacer estilos.

    PD: A pesar de que los rems no funcionen en IE 7/8, son la leche ^^

    Buenos artículos por parte de ambos ;)

    ResponderEliminar
  2. Veo que Emilio ya me está poniendo los cuernos XD

    Me pierdo un poco en muchas propiedades, pero ¿alguno tenéis IE7 instalado para probar ambas versiones? No me fio de los simuladores. Ya comenté en el otro post que en IE8 funcionaba porque es el que tengo, pero muchas veces he tenido problemas con inline-block en Explorer.

    ResponderEliminar
  3. ¿IE7? Uff! qué viejos somos... :-D
    Emilio Sí esa y otras muchas cosas más. Pero de lo que se trataba era ceñirme a propiedades que aplican a los elementos de línea.
    Sólo un juego con css.

    Sí, y ¡Vivan los Rem! :-)
    Pero por cierto, en este artículo no se usan ;-)

    Oloman sobre inline-block y su soporte ya lo comento en "tu artículo".

    Un saludo

    ResponderEliminar
  4. Tengo una duda sobre menús desplegables. ¿Cómo podría hacer para centrar todo el menú? A pesar de que, relativamente, está centrado no deja de estar algo hacia la izquierda.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Mey-Su
      Sin códigos implicados (html + Css) es imposible pronunciarse. Más si como dices "está centrado no deja de estar algo hacia la izquierda"
      Eso quiere decir que hay "algo" que lo desplaza ligeramente, ya sea un margen, un padding o que lo centras con números mágicos.

      No obstante, en el blog hay un artículo dedicado en exclusiva al tema de los centrados. Consulta a ver si tu caso está recogido.

      Un saludo

      Eliminar
  5. Excelente este blog, cada dia me lo encuentro más seguido cuando quiero solucionar problemas como este.

    Muy bueno también el aporte de Emilio.

    Saludos

    ResponderEliminar
  6. Gracias, la información que compartes es muy valiosa. Acabo de crear un gran sitio con tu ayuda, si me lo permites pondré tu blog como referencia en la sección de agradecimientos.

    ResponderEliminar
    Respuestas
    1. Siempre es un honor que alguien te incluya como referente o ayuda de algo, Guzo.
      Y además, la página es tuya y... (eso que sonaría muy feo en este blog) de tu capa un sayo xDD

      Me alegro que el blog te sirva de ayuda de cuando en vez.
      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap