Entendiendo vertical-align

18/may/2009 15

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:

Ver ejemplo 1

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 (<sub>).
    vertical-align: sub
  • super: alinea el elemento como si fuera sobrescrito (<sup>).
    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 <label></label>) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto:

Ver ejemplo 2

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

Links

Comentarios

  1. r0bb13 [#]

    A mi me costó lo mio darme cuenta de que vertical-align funcionaba bien sólo con elementos inline (me dio unos cuantos quebraderos de cabeza hace algún tiempo) y lo acabé descubriendo casi por casualidad. Espero que esto le ahorre tiempo a mucha gente. Podías haberlo puesto hace un añito 😛

  2. Enlaces del 20-05-09 | evelio.info [#]

    […] Entendiendo vertical-align por Jorge Epuñan […]

  3. dgfrancisco [#]

    hummm es cierto, en alguna ocación hice funcionar esta propiedad pero fue con textos, no con objetos html como imagenes, y particularmente ese es mi problema por estos dias; si fueran imgs dentro de un div, como lo alinearias verticalmente?, claro sin hacerlo con una tabla¿?, por cierto excelente blog 😉

  4. Naiara [#]

    Hola! justo ese era mi problema.Diseñé una web con columnas verticales junto a imágenes….y la tengo que hacer toda con CSS…con razón añadía imágenes y texto a etiquetas Div y nada. Me podéis decir donde se encuentran los elementos inline? la verdad, estoy con dreamweaver novata perdida….Grácias!

  5. Guixe [#]

    Gracias, este articulo me ha sido muy util al hacer quedar bien el apartado de Favoritos a la derecha en mi web. Saludos

  6. Gabriel [#]

    Creo que no entendi porque sigo sin poder alinear al centro vertical un div dentro de otro div que al mismo tiempo contiene imagenes y texto… a y que por si poco fuera las imagenes tienen float left :(

  7. Jorge Mario [#]

    Muchísimas gracias, como la gran mayoría tuve mis dolores de cabeza tratando de hacer que en un div se alinearan los textos sin ver ningún cambio de una propiedad a otra, los elementos inline me han cambiado la visión y ahora si a acomodar todo, gracias de nuevo

  8. jonathan [#]

    Para alinear capas div con la propiedad Float: (left, right,…) , lo mismo podemos hacer con imágenes o incluso meter las imágenes en una capa div

  9. aprendizdetodo [#]

    no entendi.
    baseline me parece igual a sub y text-bottom.

    ojala la pongan mas clara, la verdad me que he quedado igual =(

    q confusa es esta propiedad de css

  10. saul [#]

    valign: antiguo si, ¿obsoleto? parece que nunca has programado en php, asp o cualquier otro lenguaje de programacion que sirva para generar reportes, y ademas el css no es un estandar, ya que si fuera asi se verian igual mis paginas en ie y firefox( y ni hablar de los demas navegadores), el hecho de que css tenga sus ventajas no quiere decir que necesariamente lo tengas que usar en todo, y si me parece adecuado que se usen aun las tablas, o a menos que te guste complicarte la vida demasiado, ya que no es una regla que se tenga que utilizar css en cada pagina que haya en la web. no estoy en contra del css ya que me parece muy buena idea mezclar y css
    “larga vida a “

  11. saul [#]

    larga vida a “table”

  12. Migue [#]

    style=”display: inline;”

  13. Sergio [#]

    Llego medio tarde…, pero quería comentar que también funciona con display:inline-block. Y ahí sí que se pone interesante 😉 Saludos!

  14. Valign baseline | Marcpilkington [#]

    […] Entendiendo vertical-align CSSLab18 May 2009 … Los valores de vertical-align son: baseline: valor por defecto, el elemento es ubicado en la base del elemento padre. vertical-align: baseline … […]

  15. YONATAN QUINTERO [#]

    Gracias por la aclaracion xD.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab