The CSS text-align property
The CSS text-align property aligns inline content like text within its box. The values are left, right, center and justify, plus start and end which follow the text direction. It only affects inline content — to center a block itself, use margin: 0 auto or Flexbox.
Overview
text-align controls how inline content — most often text — lines up horizontally inside its container. It is inherited, so setting it on a parent aligns the text in everything below it, which makes it easy to align a whole article or a single cell.
The everyday values are left, center, right and justify. The pair worth adopting, though, is start and end: instead of hard-coding a physical side, they follow the writing direction, so start is the left in English and the right in Arabic or Hebrew. That one habit makes a layout work in right-to-left languages without a rewrite.
The classic mix-up is expecting text-align to move a block. It will not — it aligns the content inside a block, not the block itself. To center a div on the page you give it a width and margin: 0 auto, or you make its parent a flex container. text-align is for the words, not the box.
Syntax
selector {
text-align: value;
}
/* center the text inside this box */
.headline {
text-align: center;
}Values
The text-align property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
left |
Aligns inline content to the left edge (the default in left-to-right languages). |
right |
Aligns content to the right edge. |
center |
Centers inline content such as text within its line. |
justify |
Stretches the word spacing so lines meet both edges, like a newspaper column. |
start |
The leading edge, which follows the text direction (left for English, right for Arabic). |
end |
The trailing edge — the opposite of start. |
Example
<style>
div {
font: 16px/1.6 system-ui, sans-serif;
background: #f5f7fb;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 8px;
}
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
</style>
<div class="l">Left aligned — the default.</div>
<div class="c">Center aligned.</div>
<div class="r">Right aligned.</div>Best practices
- Prefer
startandendoverleftandrightso your text aligns correctly in right-to-left languages too. - Keep long passages of body text left-aligned (or
start) — centered and justified paragraphs are markedly harder to read. - Be cautious with
justifyon the web. Without hyphenation it can open up uneven "rivers" of white space; addhyphens: autoif you use it. - Remember this aligns content, not the element. To position the box itself, reach for margin auto or flexbox.
Accessibility
Alignment affects how easily text can be read. Left-aligned (or start-aligned) body text gives every line the same starting point, which helps the eye find the next line — a real benefit for readers with dyslexia. Centered and justified blocks break that consistent edge and slow reading down, so reserve them for short headings or captions.
Justified text deserves particular care: the uneven gaps it creates between words can be distracting and, in narrow columns, genuinely hard to parse. Using logical start and end values also keeps alignment correct when the page is translated into a right-to-left language.
Frequently asked questions
How do I center text in CSS?
text-align: center on the element that contains the text. Note this centers the text within its box, not the box itself.Why does text-align: center not center my div?
text-align only aligns inline content inside a block. To center the block, give it a width and margin: 0 auto, or make its parent a flex container with justify-content: center.What is the difference between left and start?
left always means the physical left edge. start means the edge where text begins, which is the left in English but the right in right-to-left languages — so it adapts automatically.Should I justify text on a website?
hyphens: auto to soften the gaps.