Propiedad CSS vertical-align

La propiedad vertical-align establece la alineación vertical de una caja inline, inline-block o table-cell. Los elementos de nivel en línea incluyen imágenes, texto, botones, y cualquier elemento con display: inline o display: inline-block.

Esta página explica dónde se aplica realmente vertical-align, el modelo de caja de línea que da sentido a sus valores, cada palabra clave y lo que hace, y los problemas más comunes que suelen confundir a los desarrolladores.

Dónde funciona vertical-align

La propiedad solo tiene efecto en dos situaciones:

Dentro de una caja de línea (line box) — para alinear una caja inline o inline-block en relación con la línea de texto en la que se encuentra. Por ejemplo, alinear un icono <img> con el texto que lo rodea.
Dentro de celdas de tabla — para alinear el contenido de un elemento <td>, <th>, o cualquier elemento con display: table-cell.

Fuera de esos contextos, la propiedad se ignora silenciosamente.

Lo que NO hace

Esta es la mayor fuente de confusión: vertical-align no centra elementos de nivel bloque. Establecer vertical-align: middle en un <div> no tiene ningún efecto. Para centrar un bloque normal, usa Flexbox (align-items: center), Grid, o margin: 0 auto (solo horizontal). La palabra clave middle, a pesar de su nombre, solo centra una caja en línea respecto al texto circundante, no un bloque dentro de su contenedor.

Valor inicial	baseline
Se aplica a	Elementos de nivel en línea y table-cell, también se aplica a ::first-letter y ::first-line.
Heredable	No.
Animable	No.
Versión	CSS1
Sintaxis DOM	object.style.verticalAlign = "middle";

Cómo funciona vertical-align

Para usar bien esta propiedad necesitas un modelo mental básico.

Cada línea de texto se dispone dentro de una caja de línea invisible. Dentro de esa caja de línea hay dos líneas de referencia importantes:

La línea base (baseline) — la línea sobre la que se apoyan los bordes inferiores de la mayoría de las letras (letras como "g" e "y" descienden por debajo de ella).
El área de contenido — la caja em completa de la fuente, aproximadamente desde la parte superior del glifo más alto hasta la parte inferior del descendente más bajo.

La mayoría de las palabras clave de vertical-align desplazan una caja en relación con una de esas líneas (baseline, text-top, text-bottom, middle), mientras que top y bottom alinean con los bordes de toda la caja de línea.

En una celda de tabla las reglas son más simples: vertical-align controla dónde se sitúa el contenido de la celda dentro de la altura de la celda, y solo top, middle, bottom y baseline son significativos.

Sintaxis

Sintaxis de la propiedad CSS vertical-align

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Ejemplo de la propiedad vertical-align con el valor "sub":

Ejemplo de la propiedad CSS vertical-align con el valor sub

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad vertical-align con el valor "middle":

Ejemplo de la propiedad CSS vertical-align con el valor middle

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad vertical-align con el valor "super":

Ejemplo de la propiedad CSS vertical-align con el valor super

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad vertical-align con los valores "top" y "bottom":

Ejemplo de la propiedad CSS vertical-align con los valores top y bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      td {
        height: 100px;
      }
      .top {
        vertical-align: top;
      }
      .bottom {
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <table>
      <tr>
        <th>Bottom</th>
        <th>Middle</th>
        <th>Top</th>
      </tr>
      <tr>
        <td class="bottom">Some text</td>
        <td>Some text</td>
        <td class="top">Some text</td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con un valor de longitud (alineando un icono con el texto)

Un valor de longitud desplaza la caja hacia arriba (valor positivo) o hacia abajo (valor negativo) desde la línea base. Esta es la forma más limpia de alinear una imagen o icono en línea con el texto adyacente:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .label {
        font-size: 20px;
      }
      .icon {
        width: 18px;
        height: 18px;
        vertical-align: -3px; /* drop it 3px to sit on the text */
      }
    </style>
  </head>
  <body>
    <p class="label">
      <img class="icon" src="https://api.w3docs.com/uploads/media/default/0001/03/4624f58ca574eae0a734eb0d43fd87bc2326a306.png" alt="icon">
      Aligned with the text baseline
    </p>
  </body>
</html>

Problemas comunes

El "espacio misterioso" debajo de una imagen. Un <img> independiente dentro de un bloque suele tener algunos píxeles de espacio debajo. Esto ocurre porque, al ser un elemento en línea, la imagen se apoya en la línea base del texto, dejando espacio para los descendentes. Puedes corregirlo con vertical-align: bottom (o middle/top), o haciendo que la imagen sea display: block.
middle no es un centrado exacto. vertical-align: middle alinea la caja con la línea base más la mitad de la x-height del elemento padre — visualmente cercano al centro para iconos pequeños, pero no exacto, y no tiene ningún efecto en elementos de bloque.
No se hereda. Cada caja debe declarar su propio vertical-align; establecerlo en un padre no tiene efecto en los hijos.
top/bottom dependen del contenido más alto. Se alinean con la caja de línea, por lo que un único elemento alto en la línea puede cambiar la posición de todo lo demás.
Los valores de longitud negativos están permitidos y suelen ser más predecibles que las palabras clave para alinear iconos con precisión de píxel.

Valores

Valor	Descripción	Pruébalo
baseline	Alinea la línea base del elemento con la línea base de su elemento padre. Este es el valor predeterminado.	Pruébalo »
length	Desplaza la línea base de la caja hacia arriba (valor positivo) o hacia abajo (valor negativo) en relación con la línea base del padre.	Pruébalo »
sub	Baja la línea base de la caja a la posición adecuada para los subíndices del elemento padre.	Pruébalo »
super	Sube la línea base de la caja a la posición adecuada para los superíndices del elemento padre.	Pruébalo »
top	Alinea la parte superior del subárbol alineado con la parte superior de la caja de línea.	Pruébalo »
text-top	Alinea la parte superior de la caja con la parte superior del área de contenido del padre.	Pruébalo »
middle	Alinea el punto medio vertical de la caja con la línea base del elemento padre más la mitad de su x-height.	Pruébalo »
bottom	Alinea la parte inferior del subárbol alineado con la parte inferior de la caja de línea.	Pruébalo »
text-bottom	Alinea la parte inferior de la caja con la parte inferior del área de contenido del padre.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'vertical-align'?

Ajusta el posicionamiento vertical de un elemento en relación con su caja inline o table-cell.Realinea el contenido de un elemento horizontalmente.Se aplica a elementos de nivel en línea y elementos 'table-cell'.Ajusta el tamaño del elemento.

Propiedades relacionadas

text-align — alineación horizontal del contenido en línea.
line-height — establece la altura de la caja de línea contra la que se alinean top y bottom.
display — permite cambiar entre inline, inline-block, block y table-cell.