Validación HTML: CSS: "text-align": X no es un valor de "text-align".

Acerca de este problema HTML

La propiedad CSS text-align controla la alineación horizontal del contenido de nivel inline dentro de un elemento de bloque. Cuando el validador HTML W3C encuentra un atributo style inline que contiene un valor de text-align que no reconoce, marca el error con un mensaje como CSS: “text-align”: X no es un valor de “text-align”, donde X es el valor problemático.

Este error ocurre comúnmente por algunas razones:

Confundir text-align con vertical-align: Usar middle, top o bottom — estos son valores de vertical-align, no valores de text-align.
Errores tipográficos: Escribir cetner en lugar de center, o rigth en lugar de right.
Usar valores no estándar: Intentar valores como auto, none o cadenas arbitrarias que no son parte de la especificación.
Confundir propiedades CSS: Usar valores de alineación de Flexbox o Grid como flex-start o space-between con text-align.

Aunque la mayoría de navegadores ignorarán silenciosamente un valor inválido de text-align y volverán a la alineación heredada o por defecto, confiar en este comportamiento es problemático. Hace que tu intención no sea clara, puede llevar a un renderizado inconsistente, y señala que puede haber una incomprensión más profunda en tu enfoque de estilos. CSS válido asegura un comportamiento predecible en todos los navegadores y tecnologías de asistencia.

Valores válidos para `text-align`

Valor	Descripción
`left`	Alinea el contenido al borde izquierdo
`right`	Alinea el contenido al borde derecho
`center`	Centra el contenido horizontalmente
`justify`	Estira el contenido para llenar todo el ancho
`start`	Alinea al borde de inicio (sensible a la dirección)
`end`	Alinea al borde final (sensible a la dirección)

Los valores start y end son propiedades lógicas que respetan la dirección de escritura del documento (atributo dir o propiedad CSS direction), haciéndolos ideales para contenido internacionalizado.

Ejemplos

Inválido: usar `middle` en lugar de `center`

Un error común es usar middle, que es un valor válido para vertical-align pero no para text-align:

<p style="text-align: middle;">Este texto fallará la validación.</p>

Solución: Reemplaza middle con center:

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

Inválido: error tipográfico en el valor

<h2 style="text-align: cetner;">Encabezado</h2>

Solución: Corrige la ortografía:

<h2 style="text-align: center;">Encabezado</h2>

Inválido: usar un valor inexistente

<div style="text-align: auto;">Algo de contenido</div>

Solución: Elige un valor de alineación válido:

<div style="text-align: left;">Algo de contenido</div>

Inválido: usar un valor de alineación vertical

<p style="text-align: top;">Texto del párrafo</p>

Solución: Si querías alineación horizontal, usa un valor válido de text-align. Si realmente necesitas posicionamiento vertical, usa vertical-align en un elemento inline o table-cell en su lugar:

<p style="text-align: left;">Texto del párrafo</p>

Ejemplos válidos mostrando todos los valores comunes

<p style="text-align: left;">Texto alineado a la izquierda.</p>
<p style="text-align: right;">Texto alineado a la derecha.</p>
<p style="text-align: center;">Texto centrado.</p>
<p style="text-align: justify;">El texto justificado se estira para llenar todo el ancho de su contenedor.</p>
<p style="text-align: start;">Alineado al inicio (respeta la dirección del texto).</p>
<p style="text-align: end;">Alineado al final (respeta la dirección del texto).</p>

Al corregir este error, verifica doblemente qué propiedad realmente necesitas. Si quieres centrar un elemento de nivel bloque en sí mismo (no el contenido de su texto), text-align no es la herramienta correcta — considera usar margin: 0 auto o Flexbox en su lugar. La propiedad text-align es específicamente para la alineación horizontal del contenido inline dentro de su bloque contenedor.