Verificação HTML: CSS: "text-align": X não é um valor "text-align".

Sobre este problema HTML

A propriedade CSS text-align controla o alinhamento horizontal de conteúdo inline dentro de um elemento de bloco. Quando o validador HTML W3C encontra um atributo style inline contendo um valor de text-align que não reconhece, sinaliza o erro com uma mensagem como CSS: “text-align”: X is not a “text-align” value, onde X é o valor problemático.

Este erro ocorre comumente por algumas razões:

Confundir text-align com vertical-align: Usar middle, top ou bottom — estes são valores de vertical-align, não de text-align.
Erros de escrita: Escrever cetner em vez de center, ou rigth em vez de right.
Usar valores não padrão: Tentar valores como auto, none, ou strings arbitrárias que não fazem parte da especificação.
Confundir propriedades CSS: Usar valores de alinhamento Flexbox ou Grid como flex-start ou space-between com text-align.

Embora a maioria dos browsers ignore silenciosamente um valor inválido de text-align e recorra ao alinhamento herdado ou padrão, confiar neste comportamento é problemático. Torna a sua intenção pouco clara, pode levar a renderização inconsistente, e sinaliza que pode haver um mal-entendido mais profundo na sua abordagem de estilização. CSS válido garante comportamento previsível em todos os browsers e tecnologias assistivas.

Valores válidos para `text-align`

Valor	Descrição
`left`	Alinha o conteúdo à margem esquerda
`right`	Alinha o conteúdo à margem direita
`center`	Centra o conteúdo horizontalmente
`justify`	Estica o conteúdo para preencher toda a largura
`start`	Alinha à margem inicial (sensível à direção)
`end`	Alinha à margem final (sensível à direção)

Os valores start e end são propriedades lógicas que respeitam a direção de escrita do documento (atributo dir ou propriedade CSS direction), tornando-os ideais para conteúdo internacionalizado.

Exemplos

Inválido: usar `middle` em vez de `center`

Um erro comum é usar middle, que é um valor válido para vertical-align mas não para text-align:

<p style="text-align: middle;">Este texto falhará a validação.</p>

Correção: Substitua middle por center:

<p style="text-align: center;">Este texto está adequadamente centrado.</p>

Inválido: erro de escrita no valor

<h2 style="text-align: cetner;">Cabeçalho</h2>

Correção: Corrija a ortografia:

<h2 style="text-align: center;">Cabeçalho</h2>

Inválido: usar um valor inexistente

<div style="text-align: auto;">Algum conteúdo</div>

Correção: Escolha um valor de alinhamento válido:

<div style="text-align: left;">Algum conteúdo</div>

Inválido: usar um valor de alinhamento vertical

<p style="text-align: top;">Texto do parágrafo</p>

Correção: Se pretendeu alinhamento horizontal, use um valor válido de text-align. Se realmente precisa de posicionamento vertical, use vertical-align num elemento inline ou table-cell em vez disso:

<p style="text-align: left;">Texto do parágrafo</p>

Exemplos válidos mostrando todos os valores comuns

<p style="text-align: left;">Texto alinhado à esquerda.</p>
<p style="text-align: right;">Texto alinhado à direita.</p>
<p style="text-align: center;">Texto centrado.</p>
<p style="text-align: justify;">Texto justificado estica para preencher toda a largura do seu contentor.</p>
<p style="text-align: start;">Alinhado ao início (respeita a direção do texto).</p>
<p style="text-align: end;">Alinhado ao fim (respeita a direção do texto).</p>

Ao corrigir este erro, verifique qual propriedade realmente precisa. Se quer centrar um elemento de bloco em si (não o seu conteúdo de texto), text-align não é a ferramenta certa — considere usar margin: 0 auto ou Flexbox em vez disso. A propriedade text-align é especificamente para o alinhamento horizontal de conteúdo inline dentro do seu bloco contentor.