Alignment
The positioning of elements along a shared edge or axis to create visual order and connection.
Plain English
Alignment is the invisible grid that makes a layout feel intentional. When elements share a left edge, a top edge, or a centre axis, the eye perceives them as related. When elements are randomly positioned — slightly off from each other, seemingly by accident — the layout feels amateur. The discipline of alignment is about being deliberate: every element aligns with something else, and that alignment communicates structure.
Technical
Implemented through Flexbox (justify-content, align-items), CSS Grid (grid placement), text-align, margin: auto (horizontal centering), and absolute positioning with consistent offsets. The most important rule: left-aligned content is the most readable default. Centre alignment works for short, isolated elements (headings, hero copy, empty states). Mixed alignment in one component (some left, some centred) without reason looks like a bug.
Live Demo
Alignment
❌ Misaligned
✓ Aligned
Some description text here
Alignment creates order. Misalignment creates visual noise.
Usage
✓ Good usage
Left-align all card content (image, title, description, CTA) so the grid feels ordered and the eye knows exactly where to go on each card.
✗ Bad usage
A card with a left-aligned title, centred description, and right-aligned button — three different alignments in one small component create confusion.
Recommended values
- Left-align: default for all multi-line text and content lists
- Centre-align: hero headings, empty states, modal headers, short single-item displays
- Right-align: numbers in table columns, prices, timestamps in feeds
- Consistent edge: all cards in a grid share the same left edge
Common mistakes
- Mixing left and centre alignment without design justification.
- Elements that are "almost" aligned — 3px off from each other looks like a mistake, not a choice.
- Right-aligning text in non-table contexts — hard to read.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Left-align all card content. Centre the hero headline and CTA. Right-align all numbers in tables. Every element aligns with at least one other element — nothing floats at a unique position.