soy Kseso y esto EsCSS

Centrar elementos flotados con fit-content sin saber número ni tamaños

Cómo centrar un menú de opciones flotadas desconociendo su número y el tamaño de cada una de ellas con el nuevo valor fit-content en su anchura.

Centrar elementos flotados con fit-content sin saber número ni tamaños

·Por Kseso ✎ 8

El último documento del W3c sobre el modelo de caja básico CSS basic box model viene con nuevos valores, como es lógico, para algunas propiedades como las anchuras y alturas, entre otras. Esto a nadie sorprenderá.

La sorpresa es que algunos de esos valores ya son soportados por Firefox y Chrome. Con sus prefijos correspondientes.

Centrado horizontal de elementos flotados sin importar cuántos sean

Uno de los nuevos valores añadidos a las propiedades width & height en el nuevo documento del consorcio es fit-content.

Así que en ella se basa la siguiente demo de un menú al que queremos centrar horizontalmente, tanto los items como la lista que los contiene, sin importar el número que sean ni sus anchuras. Este sería el marcado html:

El html del menú

<nav class="fit-content"> <ul> <li><a href="-">KsesoCss</a></li> <li><a href="-">Contacto</a></li> <li><a href="-">netK</a></li> <li><a href="-">Rss</a></li> </ul> </nav>

Como ves un menú de lo más normal y habitual.

El css del menú flotado y centrado

Para centrar las opciones sólo tenemos que declarar los siguientes estilos. Sólo se necesitan dos reglas y tres declaraciones en total:

.fit-content ul { width: fit-content; margin: 0 auto; } .fit-content li { float: left; margin: 0 5px; /*sólo a efectos de separar los items. No interviene en el centrado*/ }

Una pequeña explicación al Css utilizado:
width: fit-content; Este valor lo que hace es que la lista (ul) pese a ser y conservar su naturaleza de elemento de bloque no ocupa toda la anchura disponible. Sólo crece en función de su contenido. Y el margin: 0 auto es plenamente funcional.
Junto a lo anterior también crece su altura, pese a que sus hijos, los li´s, estén fuera del flujo del documento por estar flotados. No es necesario "limpiar los floats". Su background es visible.

El resto de los estilos del ejemplo del menú flotado y centrado sólo son necesarios para que se vea el centrado. Son ornamentales, no funcionales. La demo puedes verla abajo o también en este jsfiddle:

Check out this Pen!

Si eres habitual del blog posíblemente te resulte familiar la demo que @Oloman publicó aquí hace unas fechas: Centrar cajas flotantes sin ancho definido. El resultado es el mismo pero las formas son totalmente diferentes. Compara los estilos de ambos.

Soporte a fit-content

Como te decía al inicio el soporte de los navegadores a estos nuevos valores está limitado a Firefox y Chrome. Ni en Opera ni en Safari me ha funcionado. Tampoco en IE9 y anteriores. Si alguno tiene IE10 y lo prueba que deje un comentario con el resultado.

Así que si esta forma de centrar no te sirve, mira a ver si encuentras la que necesitas entre alguna de las 21 restantes de este artículo: Centrando al centro con Css. 20+2 maneras de lograrlo.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso