Verificação HTML: CSS: "vertical-align": "none" não é um valor de "vertical-align".

Sobre este problema HTML

A propriedade vertical-align controla o posicionamento vertical de elementos inline (como <span>, <img>, e <a>) e elementos de célula de tabela (<td>, <th>) relativamente ao seu conteúdo envolvente ou célula. Ao contrário de algumas outras propriedades CSS (como float ou border), vertical-align não tem palavra-chave none. Tentar usar none resulta numa declaração inválida que os navegadores irão ignorar, fazendo com que o elemento reverta para o valor predefinido de baseline.

Este erro acontece frequentemente quando um programador quer “repor” ou “remover” o alinhamento vertical. Uma vez que não existe valor none, a abordagem correta é definir vertical-align: baseline (o valor inicial) ou remover completamente a declaração vertical-align.

Os valores de palavra-chave válidos para vertical-align são:

baseline — alinha a linha de base do elemento com a linha de base do elemento pai (predefinido)
sub — alinha como subscrito
super — alinha como sobrescrito
text-top — alinha com o topo da fonte do elemento pai
text-bottom — alinha com a base da fonte do elemento pai
middle — alinha o meio do elemento com a linha de base mais metade da altura-x do elemento pai
top — alinha o topo do elemento com o topo do elemento mais alto da linha
bottom — alinha a base do elemento com a base do elemento mais baixo da linha

Além das palavras-chave, vertical-align também aceita valores de comprimento (por exemplo, 5px, 0.5em) e valores de percentagem (por exemplo, 50%), que deslocam o elemento relativamente à linha de base.

Usar um valor inválido como none causa um erro de validação W3C e significa que o seu estilo pretendido é silenciosamente ignorado pelo navegador. Isto pode levar a resultados de layout inesperados que são difíceis de depurar, especialmente em layouts de tabela ou contextos de formatação inline onde o alinhamento vertical afeta significativamente a aparência.

Exemplos

❌ Inválido: usar `none`

<p>
  Texto com uma <img src="icon.png" alt="ícone" style="vertical-align: none;"> imagem inline.
</p>

O validador reportará que none não é um valor vertical-align válido. O navegador ignora a declaração e usa por defeito baseline.

✅ Corrigido: usar uma palavra-chave válida

Se pretender a imagem centrada verticalmente com o texto, use middle:

<p>
  Texto com uma <img src="icon.png" alt="ícone" style="vertical-align: middle;"> imagem inline.
</p>

✅ Corrigido: repor para o valor predefinido

Se a sua intenção era “remover” qualquer alinhamento vertical, use baseline (o valor inicial) ou simplesmente remova a propriedade:

<p>
  Texto com uma <img src="icon.png" alt="ícone" style="vertical-align: baseline;"> imagem inline.
</p>

❌ Inválido: `none` numa folha de estilo para células de tabela

<style>
  td.reset {
    vertical-align: none;
  }
</style>
<table>
  <tr>
    <td class="reset">Conteúdo da célula</td>
  </tr>
</table>

✅ Corrigido: valor válido para células de tabela

Para células de tabela, o valor predefinido de vertical-align é middle na maioria dos navegadores. Para explicitamente repor ou definir um alinhamento específico:

<style>
  td.top-aligned {
    vertical-align: top;
  }
</style>
<table>
  <tr>
    <td class="top-aligned">Conteúdo da célula</td>
  </tr>
</table>

✅ Corrigido: usar um valor de comprimento

Você também pode usar um comprimento específico para deslocar o elemento da linha de base:

<p>
  Texto com uma <span style="vertical-align: 4px;">palavra ligeiramente elevada</span>.
</p>

Escolha o valor que corresponde à sua intenção de design — baseline para repor, middle ou top para necessidades comuns de alinhamento, ou um comprimento ou percentagem específico para controlo preciso.