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

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

The CSS `align-items` property received a value the validator does not recognize, either because it is misspelled, unsupported, or used with incorrect syntax.

The `align-items` property controls how flex or grid items are positioned along the cross axis of their container. Valid values include `stretch`, `flex-start`, `flex-end`, `center`, `baseline`, `start`, `end`, `self-start`, `self-end`, and `normal`. Common mistakes include using `justify-content` values like `space-between` or `space-around`, which do not apply to `align-items`. Another frequent error is a typo such as `centre` instead of `center`.

When writing inline styles or `<style>` blocks that get validated, only recognized CSS values pass validation. The W3C validator checks CSS embedded in HTML and flags values it cannot match to the property's grammar.

## Examples

### Invalid usage

```html
<div style="display: flex; align-items: space-between;">
  <p>Item</p>
</div>
```

The value `space-between` is not valid for `align-items`. It belongs to `justify-content` or `align-content`.

### Fixed usage

```html
<div style="display: flex; align-items: center;">
  <p>Item</p>
</div>
```

Replace the invalid value with one that `align-items` accepts. In this case, `center` vertically centers items within the flex container.