Validación HTML: CSS: "vertical-align": "none" no es un valor válido para "vertical-align".

Acerca de este problema HTML

La propiedad vertical-align controla el posicionamiento vertical de elementos de nivel inline (como <span>, <img> y <a>) y elementos de celda de tabla (<td>, <th>) en relación con su contenido circundante o celda. A diferencia de otras propiedades CSS (como float o border), vertical-align no tiene la palabra clave none. Intentar usar none resulta en una declaración inválida que los navegadores ignorarán, lo que significa que el elemento recurrirá al valor predeterminado de baseline.

Este error suele ocurrir cuando un desarrollador quiere “restablecer” o “eliminar” la alineación vertical. Como no existe un valor none, el enfoque correcto es establecer vertical-align: baseline (el valor inicial) o eliminar completamente la declaración vertical-align.

Los valores de palabra clave válidos para vertical-align son:

baseline — alinea la línea base del elemento con la línea base del padre (predeterminado)
sub — alinea como subíndice
super — alinea como superíndice
text-top — alinea con la parte superior de la fuente del padre
text-bottom — alinea con la parte inferior de la fuente del padre
middle — alinea el centro del elemento con la línea base más la mitad de la altura x del padre
top — alinea la parte superior del elemento con la parte superior del elemento más alto en la línea
bottom — alinea la parte inferior del elemento con la parte inferior del elemento más bajo en la línea

Además de palabras clave, vertical-align también acepta valores de longitud (por ejemplo, 5px, 0.5em) y valores de porcentaje (por ejemplo, 50%), que desplazan el elemento en relación con la línea base.

Usar un valor inválido como none causa un error de validación W3C y significa que tu estilo previsto es silenciosamente ignorado por el navegador. Esto puede llevar a resultados de diseño inesperados que son difíciles de depurar, especialmente en diseños de tablas o contextos de formato inline donde la alineación vertical afecta significativamente la apariencia.

Ejemplos

❌ Inválido: usar `none`

<p>
  Texto con una <img src="icon.png" alt="icon" style="vertical-align: none;"> imagen inline.
</p>

El validador reportará que none no es un valor válido para vertical-align. El navegador ignora la declaración y usa baseline por defecto.

✅ Corregido: usar una palabra clave válida

Si quieres que la imagen esté centrada verticalmente con el texto, usa middle:

<p>
  Texto con una <img src="icon.png" alt="icon" style="vertical-align: middle;"> imagen inline.
</p>

✅ Corregido: restablecer al valor predeterminado

Si tu intención era “eliminar” cualquier alineación vertical, usa baseline (el valor inicial) o simplemente elimina la propiedad:

<p>
  Texto con una <img src="icon.png" alt="icon" style="vertical-align: baseline;"> imagen inline.
</p>

❌ Inválido: `none` en una hoja de estilos para celdas de tabla

<style>
  td.reset {
    vertical-align: none;
  }
</style>
<table>
  <tr>
    <td class="reset">Contenido de celda</td>
  </tr>
</table>

✅ Corregido: valor válido para celdas de tabla

Para celdas de tabla, el valor predeterminado de vertical-align es middle en la mayoría de navegadores. Para restablecerlo explícitamente o establecer una alineación específica:

<style>
  td.top-aligned {
    vertical-align: top;
  }
</style>
<table>
  <tr>
    <td class="top-aligned">Contenido de celda</td>
  </tr>
</table>

✅ Corregido: usar un valor de longitud

También puedes usar una longitud específica para desplazar el elemento desde la línea base:

<p>
  Texto con una <span style="vertical-align: 4px;">palabra ligeramente elevada</span>.
</p>

Elige el valor que coincida con tu intención de diseño — baseline para restablecer, middle o top para necesidades de alineación comunes, o una longitud o porcentaje específico para control preciso.