Text-align property
Last updated: 2026-09-13
text-align Text-align property
The text-align CSS property sets the horizontal alignment of text inside a block-level element. It supports left, right, center, and justify values and applies to paragraphs, headings, table cells, and any other block container. Note that text-align aligns content inside the element, not the element itself.
| Category | |
|---|---|
| Initial Value | start |
| Inherited | Yes |
| Applies To | block |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
text-align: start | end | left | right | center | justify | match-parent;⚙️ Values
| Value | Type | Description |
|---|---|---|
start | end | left | right | center | justify | match-parent | Keyword | Horizontal text alignment values |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： start and end resolve to the left or right edge based on the text direction, making them a better fit than left/right for multilingual sites.
Warning： text-align only affects block-level elements; to center an inline element such as an image horizontally, set text-align: center on its parent.
❓ FAQ
QWhy does text-align: justify sometimes appear to have no effect?
AJustification only applies to lines other than the last line of a multi-line paragraph. If the text is a single line, or if the line is the paragraph's last line, justify produces no visible spacing adjustment.
QCan the text-align property be used to vertically center text in CSS?
ANo. text-align only controls horizontal alignment. For vertical centering, use line-height, vertical-align, Flexbox, or Grid.
QHow do I center an image horizontally inside a container using CSS?
AAn image is an inline element, so margin: auto on it has no effect. Set text-align: center on its parent container instead; or make the image display: block and then use margin: 0 auto. In Flexbox, use justify-content: center.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
text-align-last property
Control the alignment of the last line in a paragraph.
vertical-align property
Control the vertical alignment of inline elements.
