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

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

The validator rejects any `align-self` value it doesn't know, which catches typos and keywords from other properties, but also the valid `anchor-center` keyword.

`align-self` overrides the container's `align-items` for a single item. In flexbox it aligns the item on the cross axis, and in grid it aligns it inside its grid area. The validator accepts `auto`, `normal`, `stretch`, `center`, `start`, `end`, `self-start`, `self-end`, `flex-start`, `flex-end` and the baseline keywords (`baseline`, `first baseline`, `last baseline`), with an optional `safe` or `unsafe` before a position. Typical mistakes are `middle` for `center`, `left` or `right` (only `justify-self` takes those), and `space-between`, which belongs to `align-content`. Browsers drop a declaration with an unknown value, so the item falls back to whatever `align-items` says.

`anchor-center` is a different case. The CSS Anchor Positioning module adds it to `align-self` so an absolutely positioned element can center on its anchor, such as a tooltip under a button. The validator doesn't know the keyword yet and flags it even inside an `@supports` block. On an element that isn't absolutely positioned or has no default anchor, the spec says `anchor-center` behaves as `center`, so on an ordinary flex or grid item you can swap it for `center` without changing the layout.

If the element is anchor positioned and needs `anchor-center`, keep it and mute this message for that value.

## Invalid example

```html
<div style="display: flex; height: 160px;">
  <p style="align-self: middle;">Caption</p>
  <p style="align-self: anchor-center;">Price</p>
</div>
```

## Valid example

```html
<div style="display: flex; height: 160px;">
  <p style="align-self: center;">Caption</p>
  <p style="align-self: center;">Price</p>
</div>
```