> Manuales > Taller de CSS

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual