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

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

The validator rejects `justify-self` values it doesn't recognize: usually a typo or a keyword from another alignment property, sometimes the valid but newer `anchor-center`.

`justify-self` aligns one box along the inline axis, which is horizontal in left-to-right and right-to-left text, and overrides the container's `justify-items` for that box. It works on grid items, inside their grid area, and on absolutely positioned boxes. Flexbox ignores it, because a flex container places its items along the main axis with `justify-content` and auto margins. The validator accepts `auto`, `normal`, `stretch`, `center`, `start`, `end`, `self-start`, `self-end`, `flex-start`, `flex-end`, `left`, `right` and the baseline keywords (`baseline`, `first baseline`, `last baseline`). A position can take a `safe` or `unsafe` prefix, as in `safe center`.

Wrong values often come from neighbouring properties. `middle` belongs to `vertical-align`; box alignment calls it `center`. `top` and `bottom` are vertical, and the vertical (block) axis belongs to `align-self`, which spells them `start` and `end`. `space-between` and `space-around` spread space across several items and belong to `justify-content`. `legacy` only exists on `justify-items`, so `justify-self: legacy right` fails while `justify-self: right` passes. Browsers drop a declaration with an unknown value, and the box falls back to whatever alignment `justify-items` gives it.

`anchor-center` is valid CSS that the validator hasn't caught up with. CSS Anchor Positioning adds it to `justify-self` and `align-self` so an absolutely positioned element can center itself on its anchor along that axis, for example a tooltip lined up with the middle of its button. The validator reports it even inside `@supports (justify-self: anchor-center)`. When the box isn't absolutely positioned or has no default anchor, the spec says `anchor-center` behaves as `center`, so on a grid item you can write `center` and get the same layout.

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

## Invalid example

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <span style="justify-self: middle;">Item</span>
  <span style="justify-self: legacy right;">Qty</span>
  <span style="justify-self: anchor-center;">Price</span>
</div>
```

## Valid example

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <span style="justify-self: center;">Item</span>
  <span style="justify-self: right;">Qty</span>
  <span style="justify-self: center;">Price</span>
</div>
```