Centrar elementos flotados con fit-content sin saber número ni tamaños 7.3.13
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
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:
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.
Kseso
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
Para aportar:
ResponderEliminarSi se quiere una funcionalidad similar pero con compatibilidad para IE8+ y todos los navegadores modernos, símplemente se puede usar display: table;
Ejemplo aquí:
http://codepen.io/ecoal95/full/lAIFv
Gracias Delzon por el aporte.
ResponderEliminarHey Emilio:
Esto es sólo una demo para introductora de los nuevos valores de "tamaños intrínsecos" (por llamarlos de alguna manera).
Creo recordar que en el artículo de los 22 centrado hay algunos con ese valor y asociados.
Pero gracias por el ejemplo.
Saludos kseso muy interesante tu blog y por demas educativo.
ResponderEliminarDisculpa el offTopic pero me parecio interesante el efecto de redimension de la imagen al pasar el cursor en la pagina principal.
Antes de atreverme a preguntartelo busque en los posts que tienes (que son muchos) pero no pude encontrarlo y en el codigo fuente de tu pagina es como chino para mi
pudieras darme una orientacion al respecto o en su defecto un tip de como conseguir el efecto
Gracias.
y Te felicito por tu blog....
Gracias Hernan aunque creo que exageras.
ResponderEliminarSobre el efecto de la imagen, sólamente se trata de una transform: scale() para aumentar el tamaño y una transition para que lo haga suavemente. Y creo recordar que sobre las trasnformaciones 2D/3D y las transiciones sí hay algún artículo.
En concreto estas son las declaraciones de ese efecto en la portada:
.post-home-thumbnail img { transition: .7s;}
.post-home-thumbnail:hover img {
transform: scale(1.5);
transform-origin: 50% 50% 0;
}
Un saludo
Me llamó la atención que los prefijos estuvieran en los valores de las ¿propiedades?, no recuerdo haber visto algo similar.
ResponderEliminarBuen post!!!
Saludos
@cristian Los gradientes son un buen ejemplo de eso ;)
ResponderEliminarCristian como bien apunta Emilio es práctica cuando lo nuevo en vez de ser una propiedad con sus valores asociados son valores nuevos para una propiedad ya existente y soportada por el navegador.
ResponderEliminarUn saludo y gracias por la visita.