No he escrito nada sobre la propiedad flexbox debido a su poco alcance en los browsers pero creo que ya es el momento. Se puede utilizar display: flex desde IE10+ (con prefijo -ms-) y Firefox / Chrome / Opera lo soportan bastante bien.
Por ahora esta propiedad permite la mejor manera de centrar verticalmente cualquier texto sin tener que agregar HTML extra.
Dado el siguiente HTML:
<div class="vertical-centered-text">
Este texto será centrado verticalmente gracias a display: flex;
</div>El sencillo CSS:
.vertical-centered-text {
-ms-display: flex;
display: flex;
/* alineacion vertical */
align-items: center;
/* alineacion horizontal */
justify-content: center;
}
Comentarios
[…] Fuente: CSSLab […]
Hermoso :’), gracias por el aporte!! de veras gracias!!!!
Genia… MUCHAS gracias…
¡GENIAL!
No sabía de la existencia de este sitio, pero por supuesto que ya está agregado a mis marcadores =)
Tan fácil de entender la explicación y muy rápida para leer por su pequeño tamaño. Excelente post, en serio.
Te lo agradezco mucho, estos blogs/sitios me hacen feliz todos los días ^^
/* Consulta fuera de tema xd
Como se llama el efecto que tienen las cajas que están antes de la sección de “comentarios”?
Que al pasar el mouse se despliega texto??
Gracias!
Buen aporte, justo lo que necesitaba