Propriedade CSS vertical-align

A propriedade vertical-align define o alinhamento vertical de uma caixa inline, inline-block ou table-cell. Elementos de nível inline incluem imagens, texto, botões e qualquer elemento com display: inline ou display: inline-block.

Esta página explica onde vertical-align realmente se aplica, o modelo de caixa de linha que torna seus valores compreensíveis, cada palavra-chave e o que ela faz, além dos problemas mais comuns que pegam as pessoas de surpresa.

Onde vertical-align funciona

A propriedade só tem efeito em duas situações:

Dentro de uma caixa de linha — para alinhar uma caixa inline ou inline-block em relação à linha de texto em que ela está. Por exemplo, alinhar um ícone <img> com o texto ao redor.
Dentro de células de tabela — para alinhar o conteúdo de um <td>, <th>, ou qualquer elemento com display: table-cell.

Fora desses contextos, ela é silenciosamente ignorada.

O que ela NÃO faz

Esta é a maior fonte de confusão: vertical-align não centraliza elementos de nível de bloco. Definir vertical-align: middle em uma <div> não tem efeito algum. Para centralizar um bloco normal, use Flexbox (align-items: center), Grid ou margin: 0 auto (apenas horizontal). A palavra-chave middle, apesar do nome, apenas centraliza uma caixa inline em relação ao texto ao redor — não um bloco dentro de seu pai.

Valor Inicial	baseline
Aplica-se a	Elementos de nível inline e table-cell; aplica-se também a ::first-letter e ::first-line.
Herdada	Não.
Animável	Não.
Versão	CSS1
Sintaxe DOM	object.style.verticalAlign = "middle";

Como vertical-align funciona

Para usar a propriedade bem, você precisa de um modelo mental rápido.

Cada linha de texto é disposta dentro de uma caixa de linha invisível. Dentro dessa caixa de linha há duas linhas de referência importantes:

A linha de base — a linha sobre a qual a parte inferior da maioria das letras repousa (letras como "g" e "y" descem abaixo dela).
A área de conteúdo — a caixa em da fonte, aproximadamente do topo do glifo mais alto até a parte inferior do descensor mais baixo.

A maioria das palavras-chave de vertical-align desloca uma caixa em relação a uma dessas linhas (baseline, text-top, text-bottom, middle), enquanto top e bottom alinham às bordas de toda a caixa de linha.

Em uma célula de tabela, as regras são mais simples: vertical-align controla onde o conteúdo da célula fica dentro da altura da célula, e apenas top, middle, bottom e baseline são significativos.

Sintaxe

Sintaxe da Propriedade CSS vertical-align

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

Exemplo da propriedade vertical-align com o valor "sub":

Exemplo da Propriedade CSS vertical-align com 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>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade vertical-align com o valor "middle":

Exemplo da Propriedade CSS vertical-align com 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>

Experimente Você Mesmo »

Exemplo da propriedade vertical-align com o valor "super":

Exemplo da Propriedade CSS vertical-align com 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>

Experimente Você Mesmo »

Exemplo da propriedade vertical-align com os valores "top" e "bottom":

Exemplo da Propriedade CSS vertical-align com valores top e 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>

Experimente Você Mesmo »

Exemplo com um valor de comprimento (alinhando um ícone ao texto)

Um valor de comprimento desloca a caixa para cima (valor positivo) ou para baixo (valor negativo) em relação à linha de base. Esta é a forma mais limpa de alinhar uma imagem inline ou ícone com o texto ao lado:

<!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 comuns

O "espaço misterioso" abaixo de uma imagem. Uma <img> isolada dentro de um bloco costuma ter alguns pixels de espaço abaixo. Isso acontece porque, como elemento inline, a imagem fica sobre a linha de base do texto, deixando espaço para os descensores. Corrija com vertical-align: bottom (ou middle/top), ou transforme a imagem em display: block.
middle não é centralização verdadeira. vertical-align: middle alinha a caixa à linha de base mais metade da x-height do pai — visualmente próximo ao centro para ícones pequenos, mas não exato, e não faz nada em elementos de bloco.
Não é herdada. Cada caixa deve declarar seu próprio vertical-align; definir no pai não tem efeito nos filhos.
top/bottom dependem do conteúdo mais alto. Eles alinham à caixa de linha, então um único elemento alto na linha pode alterar o posicionamento de todo o resto.
Valores negativos de comprimento são permitidos e geralmente são mais previsíveis do que as palavras-chave para alinhamento preciso de ícones em pixels.

Valores

Valor	Descrições	Experimente
baseline	Alinha a linha de base do elemento com a linha de base do pai. Este é o valor padrão.	Experimente »
length	Desloca a linha de base da caixa para cima (valor positivo) ou para baixo (valor negativo) em relação à linha de base do pai.	Experimente »
sub	Abaixa a linha de base da caixa para a posição adequada de subscrito da caixa pai.	Experimente »
super	Eleva a linha de base da caixa para a posição adequada de sobrescrito da caixa pai.	Experimente »
top	Alinha o topo da subárvore alinhada com o topo da caixa de linha.	Experimente »
text-top	Alinha o topo da caixa com o topo da área de conteúdo do pai.	Experimente »
middle	Alinha o ponto médio vertical da caixa com a linha de base da caixa pai mais metade da x-height do pai.	Experimente »
bottom	Alinha a parte inferior da subárvore alinhada com a parte inferior da caixa de linha.	Experimente »
text-bottom	Alinha a parte inferior da caixa com a parte inferior da área de conteúdo do pai.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade CSS 'vertical-align' faz?

Ajusta o posicionamento vertical de um elemento em relação à sua caixa inline ou table-cell.Realinha o conteúdo de um elemento horizontalmente.Aplica-se a elementos de nível inline e 'table-cell'.Ajusta o tamanho do elemento.

Propriedades relacionadas

text-align — alinhamento horizontal do conteúdo inline.
line-height — define a altura da caixa de linha contra a qual top/bottom se alinham.
display — alterna entre inline, inline-block, block e table-cell.