Propriedade vertical-align
Última atualização: 2026-09-13
vertical-align Propriedade vertical-align
A propriedade vertical-align do CSS controla o alinhamento vertical de elementos inline ou do conteúdo dentro de células de tabela. Ela suporta palavras-chave como top, middle e baseline, bem como valores de comprimento e porcentagem, e é comumente usada para alinhar ícones com texto, ajustar elementos inline ou posicionar o conteúdo de células de tabela. Observe que vertical-align não tem efeito em elementos de nível de bloco.
| Categoria | |
|---|---|
| Valor Inicial | baseline |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
baseline | sub | super | text-top | text-bottom | middle | top | bottom | Palavra-chave | Palavras-chave de alinhamento vertical |
<length> | <percentage> | Tipo | Um valor de deslocamento preciso como comprimento ou porcentagem |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| vertical-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O vertical-align alinha em relação à linha de caixa atual ou à célula da tabela, não em relação a todo o contêiner pai.
Aviso： O vertical-align não tem efeito em elementos de nível de bloco, como div ou p. Para centralizar conteúdo de bloco verticalmente, use Flexbox ou Grid.
❓ Perguntas Frequentes
QPor que vertical-align: middle não centraliza um elemento verticalmente?
Avertical-align: middle alinha o ponto médio vertical do elemento com a linha de base do pai mais metade da altura-x; não é um centramento em relação ao contêiner pai. Destina-se a ajustes finos de elementos inline, não a uma solução real de centralização vertical.
QPor que há uma lacuna abaixo de imagens inline dentro de um parágrafo em HTML?
AAs imagens são inline por padrão, e a linha reserva espaço para descendentes abaixo da linha de base. Definir vertical-align: bottom, middle ou top — ou display: block — remove essa lacuna.
QComo centralizo verticalmente uma imagem inline com o texto adjacente usando CSS?
AEscreva vertical-align: middle na imagem ou no elemento inline adjacente e eles parecerão centrados com o texto. Para um alinhamento mais rigoroso, torne a imagem display: inline-block com vertical-align: middle, ou use Flexbox com align-items: center.
QPor que a propriedade vertical-align é ignorada em elementos div e p?
AO vertical-align só se aplica a elementos inline, inline-block e células de tabela (td/th), alinhando-os em relação à linha de base da sua linha; elementos de nível de bloco como div e p não são afetados. Para centralizar elementos de bloco verticalmente, use Flexbox ou Grid.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
