Centrado vertical con CSS3

Uno de los problemas que se presentan con mayor frecuencia al trabajar con CSS es el centrado vertical.

Hay una gran cantidad de técnicas para solucionar este problema de forma consistente, pero hasta hace muy poco no existían formas sencillas de hacerlo sin recurrir a hacks.

Veamos que podemos hacer con las nuevas propiedades que nos ofrece CSS3. Pueden ver los ejemplos funcionando en este demo.
Continúa leyendo Centrado vertical con CSS3

Layout CSS alineado a la derecha con inline-block

Float o inline-block

Desde que se abandonó el uso de tablas y se empezó a aprovechar CSS para diseñar layouts, float se ha convertido en una de las propiedades mas utilizada. Aunque float no fue concebida para organizar un layout, ha funcionado relativamente bien, y ya estamos acostumbrados a lidiar con los problemas que a veces surgen.

Recientemente se ha hablado mucho de usar display: inline-block como alternativa a los floats. Esta tampoco es la solución ideal, pero nos brinda otras posibilidades. Ambos enfoques tienen sus ventajas y desventajas, y algunas características en común.

Layout alineado a la derecha

Una de las desventajas de inline-block es que los elementos siempre fluyen de izquierda a derecha. Es el equivalente a usar float: left. Lo podemos ver en este ejemplo.

Con float: right podemos hacer que los elementos fluyan desde la derecha, y en principio no hay equivalente usando display: inline-block. Sin embargo, con un pequeño hack podemos lograrlo.
Continúa leyendo Layout CSS alineado a la derecha con inline-block