CSS Reference
text-align
Controls the horizontal alignment of text and inline content inside a block container.
Last updated: October 2026
Definition: The text-align property sets the horizontal alignment of inline content (text, inline images, inline-block elements) inside a block-level container. It inherits to child elements and applies to all inline content inside.
🎬 Live Example
Every alignment value, side by side.
💡 start and end are the modern, internationalization-friendly alternatives to left and right.
Basic Syntax
.center {
text-align: center;
}
.right {
text-align: right;
}
.logical {
text-align: start; /* Respects document direction */
}It applies to the block container and affects all inline content inside it.
🎯 All text-align Values
| Value | Behavior | Use |
|---|---|---|
left | Aligns to the left edge | Default for body text |
right | Aligns to the right edge | Numbers, prices, dates |
center | Centers the content | Headings, heroes, buttons |
justify | Stretches lines to fill width | Rarely — mostly print |
start | Logical start (left in LTR) | Modern replacement for left |
end | Logical end (right in LTR) | Modern replacement for right |
inherit | Uses parent's value | Rarely needed |
text-align vs Centering a Block
A common source of confusion.
/* ❌ text-align: center does NOT center a div */
.parent {
text-align: center;
}
.child {
width: 200px;
}
/* The child stays left-aligned as a block. */
/* ✅ To center a block, use auto margins */
.child {
width: 200px;
margin: 0 auto;
}
/* ✅ Or use flexbox */
.parent {
display: flex;
justify-content: center;
}💡 Rule: text-align centers inline content. margin: 0 auto or flexbox centers block elements.
text-align vs align-items
| Property | Aligns |
|---|---|
text-align | Inline content (text) inside a block |
align-items | Block-level children inside a flex or grid container |
justify-content | Distribution along the flex/grid main axis |
Why Not to Use justify
Justified text creates uneven word gaps because browsers don't hyphenate well on the web.
- Rivers of white space — long gaps between words in narrow columns.
- Harder to track — readers with dyslexia struggle to find the next line.
- Poor mobile experience — narrow screens make the gaps worse.
- Not necessary — left-aligned text is more readable and accessible.
If you must use justify: Add hyphens: auto and text-wrap: pretty (or balance) to reduce the rivers. Even then, avoid for body text.
Common Real-World Uses
/* Page hero */
.hero {
text-align: center;
}
/* Right-aligned table numbers */
.price-column {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Centered container with max-width */
.container {
max-width: 800px;
margin: 0 auto;
text-align: start; /* Reset to start */
}
/* Right-aligned "More" links in lists */
.list-item .more {
display: block;
text-align: right;
font-size: 0.875rem;
}
/* Centered navigation labels */
.tab-label {
text-align: center;
padding: 0.75rem 1rem;
}🎯 Related text Properties
| Property | Purpose |
|---|---|
text-align | Horizontal alignment of inline content. |
text-align-last | Alignment of the last line (only when justify). |
text-indent | First-line indentation. |
text-decoration | Underline, line-through, overline. |
text-transform | uppercase, lowercase, capitalize. |
text-shadow | Shadow behind text. |
text-overflow | Ellipsis for overflowing text. |
⚠️ Common Mistakes
- Using
text-align: centerto center a block. It only centers inline content. Usemargin: 0 autoor flexbox for blocks. - Justifying body text. Creates uneven word spacing. Left-align is more accessible.
- Centering long paragraphs. Center-aligning more than 2 lines makes text hard to track. Reserve for headings, heroes, and short labels.
- Using
text-align: centeron a table cell with numbers. Numbers are easier to compare when right-aligned. - Forgetting that
text-aligninherits. Apply to a parent and every child inherits it. Reset withtext-align: startwhere needed. - Using
leftandrightin multilingual sites. Usestartandendfor automatic RTL support. - Assuming
text-alignworks on flex items. Flex items are blocks. Usealign-itemsormargin.
♿ Accessibility Notes
- Left-aligned body text is the accessible default. Users with dyslexia read left-aligned text more easily.
- Avoid justified text. The uneven word spacing creates "rivers" that disrupt reading.
- Center only short content. Headings, buttons, single-line labels. Not paragraphs.
- Never align text to the right in LTR languages for long content. Right alignment forces the eye to jump.
- Use
startandendfor i18n. They adapt to RTL languages like Arabic and Hebrew automatically. - Test with screen readers. Text-align doesn't affect reading order — screen readers read in DOM order.
❓ Frequently Asked Questions
What is the CSS text-align property?
The text-align property controls the horizontal alignment of inline content (text, inline images, inline-block elements) inside a block-level container. It does not align the container itself — use margin: 0 auto or flexbox for that.
What is the difference between text-align and align-items?
text-align aligns inline content (text) within a block. align-items aligns block-level children within a flex or grid container. They operate on different levels of the layout.
Is text-align: justify good for web content?
Generally no for body text on the web. Justified text creates uneven word spacing because browsers don't hyphenate well, which is hard for users with dyslexia to read. Left-aligned text is the accessible default.
What does text-align: start and end mean?
start and end are logical values that respect the document's writing direction. In a left-to-right language (English), start = left and end = right. In Arabic or Hebrew (RTL), start = right and end = left.
How do I center text vertically?
text-align only handles horizontal alignment. For vertical centering, use flexbox (display: flex; align-items: center; justify-content: center) or the line-height technique for single-line text.