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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-vertical-align-none-is-not-a-vertical-align-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `vertical-align` property controls the vertical positioning of inline-level elements (like `<span>`, `<img>`, and `<a>`) and table-cell elements (`<td>`, `<th>`) relative to their surrounding content or cell. Unlike some other CSS properties (such as `float` or `border`), `vertical-align` has no `none` keyword. Attempting to use `none` results in an invalid declaration that browsers will ignore, meaning the element will fall back to the default value of `baseline`.

This mistake often happens when a developer wants to "reset" or "remove" vertical alignment. Since there is no `none` value, the correct approach is to either set `vertical-align: baseline` (the initial value) or remove the `vertical-align` declaration altogether.

The valid keyword values for `vertical-align` are:

- `baseline` — aligns the element's baseline with the parent's baseline (default)
- `sub` — aligns as a subscript
- `super` — aligns as a superscript
- `text-top` — aligns with the top of the parent's font
- `text-bottom` — aligns with the bottom of the parent's font
- `middle` — aligns the middle of the element with the baseline plus half the x-height of the parent
- `top` — aligns the top of the element with the top of the tallest element on the line
- `bottom` — aligns the bottom of the element with the bottom of the lowest element on the line

In addition to keywords, `vertical-align` also accepts length values (e.g., `5px`, `0.5em`) and percentage values (e.g., `50%`), which offset the element relative to the baseline.

Using an invalid value like `none` causes a W3C validation error and means your intended styling is silently ignored by the browser. This can lead to unexpected layout results that are difficult to debug, especially in table layouts or inline formatting contexts where vertical alignment significantly affects appearance.

## Examples

### ❌ Invalid: using `none`

```html
<p>
  Text with an <img src="icon.png" alt="icon" style="vertical-align: none;"> inline image.
</p>
```

The validator will report that `none` is not a valid `vertical-align` value. The browser ignores the declaration and defaults to `baseline`.

### ✅ Fixed: using a valid keyword

If you want the image vertically centered with the text, use `middle`:

```html
<p>
  Text with an <img src="icon.png" alt="icon" style="vertical-align: middle;"> inline image.
</p>
```

### ✅ Fixed: resetting to the default

If your intent was to "remove" any vertical alignment, use `baseline` (the initial value) or simply remove the property:

```html
<p>
  Text with an <img src="icon.png" alt="icon" style="vertical-align: baseline;"> inline image.
</p>
```

### ❌ Invalid: `none` in a stylesheet for table cells

```html
<style>
  td.reset {
    vertical-align: none;
  }
</style>
<table>
  <tr>
    <td class="reset">Cell content</td>
  </tr>
</table>
```

### ✅ Fixed: valid value for table cells

For table cells, the default `vertical-align` value is `middle` in most browsers. To explicitly reset it or set a specific alignment:

```html
<style>
  td.top-aligned {
    vertical-align: top;
  }
</style>
<table>
  <tr>
    <td class="top-aligned">Cell content</td>
  </tr>
</table>
```

### ✅ Fixed: using a length value

You can also use a specific length to offset the element from the baseline:

```html
<p>
  Text with a <span style="vertical-align: 4px;">slightly raised</span> word.
</p>
```

Choose the value that matches your design intent — `baseline` to reset, `middle` or `top` for common alignment needs, or a specific length or percentage for precise control.