HTML Guide for vertical-align

CSS: “vertical-align”: “none” is not a “vertical-align” value.

The value none is not a valid value for the vertical-align CSS property.

The vertical-align property in CSS is used to specify the vertical alignment of an inline or table-cell element. This property affects the alignment of elements that are placed next to each other in a line. Valid values for vertical-align include keywords like baseline, sub, super, text-top, text-bottom, middle, top, bottom, as well as length values (such as px, em) and percentage values. The value none is not recognized as a valid option for vertical-align, which is why the validator reports an issue.

Below are examples using valid values for the vertical-align property:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Valid Vertical Align</title>
    <style>
      .aligned-text {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td style="vertical-align: top;">Top</td>
        <td class="aligned-text">Middle</td>
        <td style="vertical-align: bottom;">Bottom</td>
      </tr>
    </table>
  </body>
</html>

In the above example, each table cell is using a valid vertical-align value (top, middle, and bottom) to control vertical alignment. If you replace vertical-align: none; with one of these values according to your design requirements, your code will validate correctly.