Text Alignment

Where your text sits on the page matters. Left-aligned feels natural for English readers. Centered feels formal. Justified looks neat in columns. CSS gives you full control.

text-align

text-align controls the horizontal alignment of text inside an element:

.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }

Try it Yourself →

left — the default. Text lines up along the left edge, ragged on the right.
center — each line is centered. Great for headings.
right — lines up along the right edge. Useful for captions or tables.
justify — stretches each line so both edges are straight. Newspapers use this.

Justified text can look awkward if the line is too narrow — you get weird gaps between words. Use it on wider containers only.

text-indent

Want to start a paragraph with an indent, like in books? That is text-indent:

p { text-indent: 30px; }

Only the first line of the paragraph is indented. Use a negative value to make it stick out to the left.

vertical-align

vertical-align controls how an element lines up vertically with surrounding text. It is mostly used with inline elements or table cells:

.top     { vertical-align: top; }
.middle  { vertical-align: middle; }
.bottom  { vertical-align: bottom; }
.baseline { vertical-align: baseline; }

baseline is the default — it aligns the text's bottom line (the baseline) with surrounding text. middle is handy for aligning images with text next to them.

← Font Weight & Style

Text Decoration →