HTML Guides for box alignment

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>

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>