A locally centred object breaks the page spine
Aliases: rogue center · centred in a start-aligned form
What it is
A sign-in form start-aligns its fields, then drops a circular biometric button on the centre line, then returns “Need help?” to the left edge. That button holds equal leftover on both sides, so it does not sit on the main track; the track breaks. The help link looks tossed there. It is just the eye re-acquiring the edge after the break.
Local centering is not ugly in the abstract. It is lethal when it is inserted into a spine that is already working. A fully centred empty state has no spine to break, and hurts much less.
Why it happens
A centred object is defined by equal leftover, so its left edge almost never coincides with the content start. A scan riding that start edge finds nothing on the track, has to hunt the axis of symmetry, then find the start edge again on the next item. One control, two re-acquisitions.
Marketing likes badges, “or” dividers and social-login marks on the page axis because posters are axial. A tools form is a left spine. Nesting poster geometry inside a form is two coordinate systems fighting. margin: auto and text-align: center are too easy to drop into a local container; the mock looks balanced, the scrolling region is a pothole.
Where it stops holding
Heroes, empty-state art, progress rings, large avatars are axial objects. When a form follows, kill the axis at the block boundary; do not carry it into the fields. A lone primary button centred on a narrow phone is sometimes reach talking over alignment; even then, the label inside the button can start-align so the button does not grow a second axis.
A centred “or” between two equal columns is traditional. If the columns are not equal, the axis faces lopsided matter and reads worse.
Applying it
- Inside a start-aligned scrolling region, park badges, secondary actions and dividers on the main track (a start-aligned text button, a start-aligned “Use biometrics”) rather than on the page axis.
- If an object must be centred, give it its own short block with between-group gaps above and below, so the axis lives in a gated interval instead of between fields.
- How to check: draw the region’s main left edge. Any axial object in the same scrolling region, sandwiched by start-aligned copy, is a break. Move it to the left edge and walk the fill-in task: watch whether gaze still hops between the axis and the edge.