HTML Guides for align-self

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

<div style="display: flex; height: 160px;">

<p style="align-self: middle;">Caption</p>

<p style="align-self: anchor-center;">Price</p>

</div>

Valid example

<div style="display: flex; height: 160px;">

<p style="align-self: center;">Caption</p>

<p style="align-self: center;">Price</p>

</div>