Alineación vertical con CSS

  • Por
CSS 2 no soporta alineación vertical, así que para alinear verticalmente un contenido de una capa tenemos que utilizar técnicas o trucos alternativos.
Para los que estábamos acostumbrados a utilizar tablas para maquetar páginas, nos resulta extraño que con CSS no se haya pensado una manera de alinear verticalmente un contenido en un contenedor. Cuando teníamos un contenido metido en una celda de una tabla utilizábamos el atributo valign=middle para alinearlo al centro vertical de la celda.

Pero en las versiones actuales de CSS (vamos por la CSS2), no se ha incorporado una forma de definir la alineación vertical de los elementos. Me figuro que habrá una razón especial por la que se ha decidido no incorporar la alineación vertical en etiquetas DIV, pero lo cierto es que los diseñadores o maquetadores necesitamos ese atributo, por lo menos en algunas ocasiones, para realizar nuestro trabajo.

Dentro de poco es de prever que sacarán CSS3, igual entonces hay una manera de alinear verticalmente un contenido en una capa, pero mientras tanto debemos utilizar algún truco para conseguirlo.

Ahora presentaré un hack CSS para alineación vertical de elementos en las páginas. Los llamados hack CSS son como trucos para definir estilos que dan problemas en distintos navegadores o no existen maneras de definirlos con las herramientas actuales de CSS. Explicamos y dimos ejemplos de hacks CSS en un artículo anterior.

Hack CSS para alineación vertical por medio de una imagen

Vamos a mostrar un truco sencillo para alinear verticalmente con CSS utilizando una imagen. Aprovecharemos que la imagen tiene un atributo vertical-align:middle; que sirve para que el texto que hay después de la imagen esté alineado a su mitad vertical.

Entonces haremos algo como esto.

Definimos los estilos para una imagen:

<style type="text/css">
img.valign {
   height: 100%;
   vertical-align: middle;
   width: 0px;
}
</style>


En los estilos de la imagen definimos que tenga height 100% para adaptarse a la altura del contenedor donde la hayamos metido. vertical-align:middle sirve para que el texto que haya antes o después de la imagen. El atributo width: 0px nos sirve simplemente para que la imagen no tenga anchura, puesto que no queremos mostrar ninguna imagen ni que esta tome espacio en la página, sólo queremos alinear verticalmente.

Ahora podremos crear una capa con un contenido alineado en la vertical, de esta manera:

<div style='height:330px; background-color: #ccccff;'>
Contenido alineado verticalmente. <img class="valign" />
</div>


La etiqueta DIV puede tener la altura que deseemos. El color de fondo simplemente lo he colocado para que se vean sus límites.

Podemos ver la imagen que se ha colocado dentro de la capa, que tiene class definida en el css anterior. No tiene src ni nada, pues no necesitamos colocarlo porque no queremos mostrar ningún archivo como imagen.

Podemos ver el ejemplo en marcha en una página aparte.

El ejemplo funciona perfectamente en Internet Explorer, Firefox y Opera, con lo que es un hack css perfectamente usable y compatible con la mayoría de sistemas.

Lo malo es que esta alineación vertical sólo funcionará en caso que el contenido de la capa no supere una línea. En el momento que el texto de la capa tenga varias líneas, sólo se alineará verticalmente una de ellas, la primera o la última, dependiendo de donde se haya colocado la imagen, delante o detrás del texto.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

elen mercado

29/10/2009
no me funciona
En mi FF3... no se centra con ese metodo... T~T buaah

Ricardo

20/11/2009
La clase me funciono perfecto
Muchas gracias solo que debi sacar la propiedad width: 0px; ya que me hacia desaparecer la imagen.

Muchas gracias

Afmu

08/6/2010
un 10
Muy bueno el tutorial, me va a ahorrar muchos quebraderos de cabeza.
Gracias!

Jailbreak

26/7/2010
Alinear verticalmente middle
bueno mi estrategia para eso es simplemente posicionar la capa en el medio por medio de porcentajes, hago cuentas mentales de en que posición con respecto a la parte superio de la pagina debe ir y listo, por ejemplo en una página de 100%, necesito poner alineado verticalmente en el medio una capa de 10% entonces lo que hago es 100%/2 - 10%/2 = 45%, ese 45% es el atributo top de mi capa top:45%, un saludo y espero les sirva

Glyph

27/2/2012
Alineación vertical
Quiero compartir este truco para alineación vertical de textos.
A partir del ya conocido de insertar una imagen, se puede mejorar con CSS e imágenes embebidas (en base64):

/* para cabeceras en HTML5 */
header:before {
content: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAQAAAAALAAAAAABAAEAAAICRAEAOw==);
width: 0px;
height: 100%;
vertical-align: middle;
}

NOTA: El archivo que se inserta es una imagen gif de 1px de tamaño con fondo transparente, realizado un programa de edición de imágenes (SeaShore).