Como muchos deben ya saber, es un tremendo lío alinear verticalmente un elemento HTML mediante CSS estándar; de hecho una de las razones de que aún personas siguen utilizando tablas para estructurar sitios: precisamente porque las celdas hacen este alineado horizontal y vertical tan fácil, mediante los atributos align="" y valign="". Pero utilizando web standards es otra cosa, una dimensión aún perturbante y siendo franco, algo complicada de entender y llevar a la práctica.

CSS tiene una ‘obscura’ propiedad llamada vertical-align. Lo obscuro se debe a que es confuso su entendimiento, y por ende su uso. Para ayudar a aclarar eso, este artículo lo atacará por dos ámbitos más que necesarios: alineado de elementos de formulario y de imágenes.

Vertical-align tiene uso principalmente en etiquetas que son por esencia de tipo inline. Si tratas de utilizar esta propiedad en un

por ejemplo, o en un

quizás es por eso que te hayas frustrado ya que estos elementos son de tipo block. Cuando vertical-align es definido para elementos inline, se comporta como el antiguo y obsoleto atributo valign="". Tomando este principio, su uso en imágenes junto a texto se ven resultados concretos:

[Ver ejemplo 1][1]{.verejemplo}

Los valores de vertical-align son:

  • baseline: valor por defecto, el elemento es ubicado en la base del elemento padre.
    vertical-align: baseline
  • sub: alinea el elemento como si fuera subescrito ().
    vertical-align: sub
  • super: alinea el elemento como si fuera sobrescrito ().
    vertical-align: super
  • top: la parte superior del elemento es alineado con la parte superior del elemento en la misma línea.
  • text-top: la parte superior del elemento es alineada con la parte superior del padre de los elementos de texto.
    vertical-align: text-top
  • middle: el más interesante; el elemento es ubicado en la mitad del elemento padre.
    vertical-align: middle
  • bottom: también interesante; la parte inferior del elemento es alineado con la parte más baja de la línea.
  • text-bottom: la parte inferior del elemento es alineada con la parte inferior del padre de los elementos de texto.
    vertical-align: text-bottom
  • %: alínea el elemento en valores porcentuales de la propiedad line-height (se permiten valores negativos).

Otro importante uso de esta propiedad es con etiquetas de formulario, principalmente cuando queremos alinear los nombres de los campos (generalmente envueltos en ) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto:

[Ver ejemplo 2][2]{.verejemplo}

Como décadas pasadas, esta propiedad también puede ser utilizada en reemplazo del atributo para celdas de tablas, bajo los mismos valores. Como las celdas por defecto tienen vertical-align: middle definidos, puedes utilizar los otros valores para lograr lo que necesites.

¿Milagrosa? Bueno, suena bien hasta ahora pero está lejos de ser la solución definitiva, ya que IE6 e IE7 soporta esta propiedad a su manera, como siempre.

![vertical-align entre browsers][3]

[1]: http://www.csslab.cl/ejemplos/verticalalign/img.html “Enlace en CSSLab a “Ver ejemplo 1"” [2]: http://www.csslab.cl/ejemplos/verticalalign/form.html “Enlace en CSSLab a “Ver ejemplo 2"” [3]: http://www.csslab.cl/wp-content/uploads/2009/05/verticalalign-browsers.png