Text Alignment
The horizontal position of text within its container: left, centre, right, or justified.
Plain English
Text alignment is one of the most misused properties in amateur UI design. The default — left alignment — works for nearly everything. Centred text looks good for short headings and hero copy, but becomes exhausting to read in paragraphs because the eye has no consistent anchor to return to at the start of each line. Right alignment is for numbers in tables. Justified creates awkward rivers of space in narrow columns.
Technical
The text-align CSS property accepts left, right, center, justify, and start/end (logical properties that respect LTR/RTL direction). For multi-line text, justify creates even edges on both sides by adjusting word spacing — avoid it without also setting hyphens: auto. The logical properties start and end adapt to reading direction and are preferred in internationalised UIs.
Live Demo
Text alignment
Left
Good typography guides the reader effortlessly through the content.
Body text — natural reading flow
Center
Good typography guides the reader effortlessly through the content.
Headings, CTAs, short copy
Right
Good typography guides the reader effortlessly through the content.
Numbers, RTL languages
Justify
Good typography guides the reader effortlessly through the content.
Caution — uneven word gaps
Left-align body text. Center short headings. Never justify body copy.
Usage
✓ Good usage
Left-align all body copy and multi-line text. Centre only the main hero headline and CTA. Right-align all numeric values in the data table.
✗ Bad usage
Centring every section of a landing page — card text, body paragraphs, and lists — making it impossible for the eye to find its place on each line return.
Recommended values
- left (start) — body copy, lists, all text > 2 lines
- center — hero headlines, short taglines, empty states, dialog headings
- right — numbers in table columns, timestamps, secondary metadata on the right edge
- justify — avoid in UI; only in long-form editorial with narrow columns and hyphens: auto
Common mistakes
- Centring body paragraphs — hard to read because the starting position of each line is unpredictable.
- Using justify on short paragraphs — creates ugly spaces at the end of short lines.
- Mixing alignment within a single content block without a clear reason.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Left-align all body text and multi-line copy. Centre the hero headline and sub-headline only. Right-align numbers in all table columns. Keep a consistent alignment system across the entire page.