O de cómo distribuir elementos equitativamente, con independencia de su número y/o tamaño. O lo que es lo mismo, en esta ocasión partimos de la necesidad de centrar varios elementos de los que desconocemos, a la hora de picar los estilos, su número y el contenido de cada uno de ellos.
La declaración Css que lo hará posible serádisplay: inline-block. Así que antes de meternos en harina, un poco de teoría e historia sobre este valor.
El valor inline-block se recoge en laespecificación 2.1 y permite que elementos de bloque se comporten como de línea entre ellos.
O dicho de otra manera. Los inline-blockpueden compartir la misma línea en el flujo del documento como los inline pero conservando propiedades de block.
Además de eso, y por la parte que tienen de elementos en línea acepta propiedades propias del texto, como alineamientos,lettter-spacing, etc.
El soporte de los navegadores a este valor no te debería preocupar. Según caniusepodemos afirmar que es total. Sólo se desmarca IE7 con un parcial: también lo soporta, pero sólo en elementos que por naturaleza son de línea.
Así que vamos a beneficiarnos de estas particularidades para lograr nuestro propósito: conseguir centrar un número desconocidos de elementos de los que tampoco sabemos a priori su contenido más o menos largo.
El primer caso es el de la distribución de los items de un menú variables tanto en el número como en el la longitud del texto de cada enlace.
Tengamos el siguiente código Html:
El uso de clases es para poder reutilizar el Css en las variaciones.
Y a continuación nuestro Css que comienza por un mini reset. De él sólo cabe reseñar el uso de la propiedad box-sizing porque no queremos preocuparnos por descuadres por los rellenos y bordes
La alineación horizontal se debe al text-align: center y la vertical al paddingsuperior e inferior de 'padre' y la separación entre items por el valor de letter-spacing
Los 'hijo' al tener declarado el valor inline-block se ven afectados como te decía al inicio por las propiedades de "texto" de 'padre'. Y lo único que necesitamos es volver al valor 'normal' la separación entre letras.
El resultado es el que ves a continuación:
Este caso tiene una contra: si la anchura de 'padre' no es la suficiente para todos los 'hijo' se pasan a la línea de abajo, alineado al centro y pegado al de arriba. Estéticamente feo.
Podemos hacer alguna variación mínima en las propiedades de .padre, añadiendo un id (#segundo), para hacer la típica galería con distribución homogénea y así corregir el problema anterior de la segunda y sucesivas líneas y que en caso de que el número de items no sea múltiplo de los que caben por línea se coloque a la izquierda en vez del centro.
Nuestro Html de base, el típico y mínimo de una galería de miniaturas:
Y vamos con las variaciones Css. Recuerda que tanto la clase 'padre' como 'hijo' del ejemplo anterior siguen en uso.
La igualdad entre el espacio vacío de los laterales de la caja 'padre' y los ríos entre items lo conseguimos con el borde superior y de los laterales del padre de igual valor al margen inferior de los items. Y la separación entre los 'hijo', como antes, es obra de letter-spacing declarado en '#segundo'.
Para lograr que los items de la última fila se coloquen a la izquierda cambiamos la alineación del texto de centrado a justificado en la caja padre y a los hijos la alineación vertical la declaramos en 'top' y por las particularidades del ejemplo ayudo con un min-height por cuestiones de estética
El tamaño de las imágenes queda controlada por su anchura (100%). Recuerda que los porcentajes siempre son relativos no al propio elemento sino al que lo contiene.
El resultado es el que ves a continuación:
Y para terminar, una distribución horizontal con scroll. El marcado Html es el mismo que el anterior, así que nos lo ahorramos y directos al Css:
En este caso conjugamos el borde y relleno en la caja padre con el margen inferior de los hijos para darle un poco de aire en los laterales.
Y para no tener necesidad de calcular el ancho de la caja padre en función del número y tamaño de sus hijos (prácticamente imposible ya que estamos trabajando con el supuesto de desconocer esas variables a priori), hacemos uso de la swclración white-space: nowrap que en combinación con la anchura declarada y el overflow fuerzan la aparición del scroll.
En este último caso, los hijos los alineamos verticálmente al centro. Esto al gusto.
Y para terminar y conseguir cierta armonía en el tamaño de las imágenes las igualamos en altura porque son apaisadas.
Este es el resultado final:
Recuerda que estos ejemplos son sólo eso, ejemplos. Así que si decides usar alguno posíblemente tengas que retocarlo para ajustarlo a tus necesidades. Amén de tener que corregir algún despiste o fallo que seguro he cometido fruto de las prisas, ignorancia y mala cabeza.
Así que cualquier corrección o sugerencia se agradece. Tienes los comentarios a tu disposición.
Y para terminar este tocho que me ha salido, gracias a D. Oloman por prestarme su blog para compartir esta curiosidad con su lectores. Ha sido un placer.
Y ya que lo tengo a mano, por si alguno aún se preocupa por el innombrable en su ver.7 y quiere tenerlo presente, sólo tienes que añadir al ejemplo lo siguiente:
Nota: Los ejemplos mostrados con JSFIDDLE son accesibles desde el icono + y allí podréis trastear para probar los efectos de cada propiedad así como posibles variaciones.
-Por Oloblogger
Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.
La declaración Css que lo hará posible serádisplay: inline-block. Así que antes de meternos en harina, un poco de teoría e historia sobre este valor.
Display: inline-block
El valor inline-block se recoge en laespecificación 2.1 y permite que elementos de bloque se comporten como de línea entre ellos.
O dicho de otra manera. Los inline-blockpueden compartir la misma línea en el flujo del documento como los inline pero conservando propiedades de block.
Además de eso, y por la parte que tienen de elementos en línea acepta propiedades propias del texto, como alineamientos,lettter-spacing, etc.
El soporte de los navegadores a este valor no te debería preocupar. Según caniusepodemos afirmar que es total. Sólo se desmarca IE7 con un parcial: también lo soporta, pero sólo en elementos que por naturaleza son de línea.
Así que vamos a beneficiarnos de estas particularidades para lograr nuestro propósito: conseguir centrar un número desconocidos de elementos de los que tampoco sabemos a priori su contenido más o menos largo.
1. Doble centrado vertical y horizontal de un MENÚ de una línea.
El primer caso es el de la distribución de los items de un menú variables tanto en el número como en el la longitud del texto de cada enlace.
Tengamos el siguiente código Html:
El uso de clases es para poder reutilizar el Css en las variaciones.
Y a continuación nuestro Css que comienza por un mini reset. De él sólo cabe reseñar el uso de la propiedad box-sizing porque no queremos preocuparnos por descuadres por los rellenos y bordes
La alineación horizontal se debe al text-align: center y la vertical al paddingsuperior e inferior de 'padre' y la separación entre items por el valor de letter-spacing
Los 'hijo' al tener declarado el valor inline-block se ven afectados como te decía al inicio por las propiedades de "texto" de 'padre'. Y lo único que necesitamos es volver al valor 'normal' la separación entre letras.
El resultado es el que ves a continuación:
Este caso tiene una contra: si la anchura de 'padre' no es la suficiente para todos los 'hijo' se pasan a la línea de abajo, alineado al centro y pegado al de arriba. Estéticamente feo.
2. Doble centrado y distribución homogénea en varias líneas. Galería de imágenes.
Podemos hacer alguna variación mínima en las propiedades de .padre, añadiendo un id (#segundo), para hacer la típica galería con distribución homogénea y así corregir el problema anterior de la segunda y sucesivas líneas y que en caso de que el número de items no sea múltiplo de los que caben por línea se coloque a la izquierda en vez del centro.
Nuestro Html de base, el típico y mínimo de una galería de miniaturas:
Y vamos con las variaciones Css. Recuerda que tanto la clase 'padre' como 'hijo' del ejemplo anterior siguen en uso.
La igualdad entre el espacio vacío de los laterales de la caja 'padre' y los ríos entre items lo conseguimos con el borde superior y de los laterales del padre de igual valor al margen inferior de los items. Y la separación entre los 'hijo', como antes, es obra de letter-spacing declarado en '#segundo'.
Para lograr que los items de la última fila se coloquen a la izquierda cambiamos la alineación del texto de centrado a justificado en la caja padre y a los hijos la alineación vertical la declaramos en 'top' y por las particularidades del ejemplo ayudo con un min-height por cuestiones de estética
El tamaño de las imágenes queda controlada por su anchura (100%). Recuerda que los porcentajes siempre son relativos no al propio elemento sino al que lo contiene.
El resultado es el que ves a continuación:
3. Tercera y última variación: galería horizontal con scroll
Y para terminar, una distribución horizontal con scroll. El marcado Html es el mismo que el anterior, así que nos lo ahorramos y directos al Css:
En este caso conjugamos el borde y relleno en la caja padre con el margen inferior de los hijos para darle un poco de aire en los laterales.
Y para no tener necesidad de calcular el ancho de la caja padre en función del número y tamaño de sus hijos (prácticamente imposible ya que estamos trabajando con el supuesto de desconocer esas variables a priori), hacemos uso de la swclración white-space: nowrap que en combinación con la anchura declarada y el overflow fuerzan la aparición del scroll.
En este último caso, los hijos los alineamos verticálmente al centro. Esto al gusto.
Y para terminar y conseguir cierta armonía en el tamaño de las imágenes las igualamos en altura porque son apaisadas.
Este es el resultado final:
4. Disclaimer y agradecimiento
Recuerda que estos ejemplos son sólo eso, ejemplos. Así que si decides usar alguno posíblemente tengas que retocarlo para ajustarlo a tus necesidades. Amén de tener que corregir algún despiste o fallo que seguro he cometido fruto de las prisas, ignorancia y mala cabeza.
Así que cualquier corrección o sugerencia se agradece. Tienes los comentarios a tu disposición.
Y para terminar este tocho que me ha salido, gracias a D. Oloman por prestarme su blog para compartir esta curiosidad con su lectores. Ha sido un placer.
5. Y final
Y ya que lo tengo a mano, por si alguno aún se preocupa por el innombrable en su ver.7 y quiere tenerlo presente, sólo tienes que añadir al ejemplo lo siguiente:
Esta entrada está escrita por @Kseso, 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.
En esta ocasión no me va a costar nada saber quién lee realmente las entradas del blog hasta el final ;)
Kseso Css: Blog recomendado para estar al tanto de todo lo referente a CSS.
Nota: Los ejemplos mostrados con JSFIDDLE son accesibles desde el icono + y allí podréis trastear para probar los efectos de cada propiedad así como posibles variaciones.
-Por Oloblogger
Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.
