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

About This CSS Issue

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

<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

<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>