Aligning text is one of the very first typographic decisions anyone learns, long before the web existed: left for body copy, centered for a poster headline, justified for a printed book. CSS brings all four classic alignments into a single property, text-align.
It is simple to use, but it is often confused with another property, justify-content, because both carry the word alignment in their name without acting on the same thing. Understanding the difference saves long minutes spent wondering why a property that is supposed to center something has no visible effect.
Definition
text-align aligns the text content of an element inside its own box, line by line. It accepts four main values: left, right, center and justify.
h1 {
text-align: center;
}
p {
text-align: justify;
}| Value | Effect |
|---|---|
left | Aligns text against the left edge of its box |
right | Aligns text against the right edge |
center | Centers each line within the available width |
justify | Stretches spacing so every line touches both edges, except the last |
start / end | Like left/right, but adapts to the language's reading direction |
start and end are worth knowing as soon as a site targets more than one language: in French or English they match left and right, but in a right-to-left language like Arabic they flip automatically, with no need to write a separate rule.
The confusion with justify-content
text-align and justify-content have similar-sounding names, but they operate at different levels. text-align positions text inside the box that contains it, without ever moving that box itself. justify-content, specific to Flexbox and grid, positions entire boxes relative to each other inside a container.
A classic trap: applying text-align: center; to a flex container to try to center the items it holds. That only centers the text inside each child box, not the boxes themselves relative to one another. To center boxes inside a flex container, it is justify-content: center;, set on the container, that does the job.
.container {
display: flex;
justify-content: center; /* centers the child boxes among themselves */
}
.container p {
text-align: center; /* centers the text inside each box */
}The special case of justify
The justify value stretches the space between words so that every line, except the last, touches exactly both edges of its box. The result recalls the layout of a printed book, but on narrow columns, like on mobile, the stretched spacing becomes uneven and creates vertical white channels running through several lines, a known flaw called rivers of white space.
Best practices
Reserve justify for columns wide enough to absorb it, ideally combined with automatic word hyphenation to limit rivers. On an application interface, left or start remains the safest default for body copy, while center suits short headings, buttons, or one-off messages better than long paragraphs.
Frequently asked questions
Why doesn't text-align: center center my div?
Because text-align acts on text, not on the box that holds it. To center an entire block horizontally, act on its margins instead, for example with margin: 0 auto; paired with a defined width, or reach for Flexbox with justify-content: center;.
What is the difference between left and start?
left always refers to the physical left edge of the screen. start refers to the beginning of the reading direction, which matches left in English but matches right in a right-to-left language. For a multilingual site, start avoids having to rewrite alignment per language.
Does text-align pass down to child elements?
Yes, text-align is one of the properties that passes down through inheritance. An alignment set on a container therefore applies to every piece of text it contains, unless a deeper element redefines its own value.
Can text be justified without visible rivers?
They can be significantly reduced by combining justify with automatic hyphenation of long words at the end of a line, and by reserving the value for columns wide enough to handle it. But on a narrow column, no setting removes them entirely: it is a known limitation of justification.