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 <div> por ejemplo, o en un <p> 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:
Los valores de vertical-align son:
- baseline: valor por defecto, el elemento es ubicado en la base del elemento padre.
- sub: alinea el elemento como si fuera subescrito (<sub>).
- super: alinea el elemento como si fuera sobrescrito (<sup>).
- 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.
- middle: el más interesante; el elemento es ubicado en la mitad del elemento padre.
- 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.
- %: 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 <label></label>) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto:
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.
fuente: http://www.csslab.cl/
