# CSS: “text-align”: X is not a “text-align” value.

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

The `text-align` CSS property controls horizontal alignment of inline-level content within a block element. When the W3C HTML validator encounters an inline `style` attribute containing a `text-align` value it doesn't recognize, it flags the error with a message like **CSS: "text-align": X is not a "text-align" value**, where X is the offending value.

This error commonly occurs for a few reasons:

- **Confusing `text-align` with `vertical-align`**: Using `middle`, `top`, or `bottom` — these are `vertical-align` values, not `text-align` values.
- **Typos**: Writing `cetner` instead of `center`, or `rigth` instead of `right`.
- **Using non-standard values**: Trying values like `auto`, `none`, or arbitrary strings that aren't part of the specification.
- **Confusing CSS properties**: Using Flexbox or Grid alignment values like `flex-start` or `space-between` with `text-align`.

While most browsers will silently ignore an invalid `text-align` value and fall back to the inherited or default alignment, relying on this behavior is problematic. It makes your intent unclear, can lead to inconsistent rendering, and signals that there may be a deeper misunderstanding in your styling approach. Valid CSS ensures predictable behavior across all browsers and assistive technologies.

### Valid values for `text-align`

| Value | Description |
|-----------|---------------------------------------------|
| `left` | Aligns content to the left edge |
| `right` | Aligns content to the right edge |
| `center` | Centers the content horizontally |
| `justify` | Stretches content to fill the full width |
| `start` | Aligns to the start edge (direction-aware) |
| `end` | Aligns to the end edge (direction-aware) |

The `start` and `end` values are logical properties that respect the document's writing direction (`dir` attribute or `direction` CSS property), making them ideal for internationalized content.

## Examples

### Invalid: using `middle` instead of `center`

A common mistake is using `middle`, which is a valid value for `vertical-align` but not for `text-align`:

```html
<p style="text-align: middle;">This text will fail validation.</p>
```

**Fix:** Replace `middle` with `center`:

```html
<p style="text-align: center;">This text is properly centered.</p>
```

### Invalid: typo in the value

```html
<h2 style="text-align: cetner;">Heading</h2>
```

**Fix:** Correct the spelling:

```html
<h2 style="text-align: center;">Heading</h2>
```

### Invalid: using a non-existent value

```html
<div style="text-align: auto;">Some content</div>
```

**Fix:** Choose a valid alignment value:

```html
<div style="text-align: left;">Some content</div>
```

### Invalid: using a vertical alignment value

```html
<p style="text-align: top;">Paragraph text</p>
```

**Fix:** If you intended horizontal alignment, use a valid `text-align` value. If you actually need vertical positioning, use `vertical-align` on an inline or table-cell element instead:

```html
<p style="text-align: left;">Paragraph text</p>
```

### Valid examples showing all common values

```html
<p style="text-align: left;">Left-aligned text.</p>
<p style="text-align: right;">Right-aligned text.</p>
<p style="text-align: center;">Centered text.</p>
<p style="text-align: justify;">Justified text stretches to fill the full width of its container.</p>
<p style="text-align: start;">Start-aligned (respects text direction).</p>
<p style="text-align: end;">End-aligned (respects text direction).</p>
```

When fixing this error, double-check which property you actually need. If you want to center a block-level element itself (not its text content), `text-align` isn't the right tool — consider using `margin: 0 auto` or Flexbox instead. The `text-align` property is specifically for the horizontal alignment of inline content within its containing block.