The text-align property sets the horizontal alignment of inline-level content inside a block container or table cell. Think of it as the horizontal partner of vertical-align.
It is inherited. The modern initial value is start (follows direction). Physical keywords (left, right) stay fixed; logical keywords (start, end) flip with writing direction. It does not center the block box itself.
Not deprecated. Prefer standard keywords. Non-standard: avoid -moz-center / -webkit-center — use center instead. Use justify carefully for readability.
text-align: start | end | left | right | center | justify | match-parent | initial | inherit;| Value | Description | Try it |
|---|---|---|
left | Align to the physical left edge | Try it |
center | Center inline content in the line box | Try it |
right | Align to the physical right edge | Try it |
justify | Stretch lines to both edges (last line excluded) | Try it |
start | Align to the start edge of the writing direction | Try it |
end | Align to the end edge of the writing direction | Try it |
match-parent | Like inherit, but start/end resolve using the parent’s direction | Try it |
text-alignPut it on the block that contains the text you want to align.
p, h1, div, or a table cell).text-align to a keyword such as center or start.start / end when the page may use LTR and RTL.text-align-last; for spacing details, see text-justify.| Piece | Required? | Role |
|---|---|---|
| Block container | Yes | Property applies to block boxes / table cells |
| Inline content | Yes (to see it) | Text or inline-level children get aligned |
| Keyword | Yes | Chooses left, center, start, justify, and so on |
| direction / lang | For start/end | Logical edges follow writing direction |
Change text-align on the same paragraph. The box width stays fixed so alignment is easy to see.
Each snippet focuses on text-align. Extra CSS is kept minimal. Use Try It Yourself for a live editor.
Center the inline content inside a block.
<style>
p {
text-align: center;
}
</style>
<p>This paragraph is centered.</p>text-align on the paragraph (or a parent).Stretch multi-line text so both edges look even.
<style>
p {
text-align: justify;
}
</style>
<p>
Justified text spreads spaces so full lines meet both edges.
The last line usually stays start-aligned.
</p>text-align-last.Align to the start edge so LTR and RTL both feel natural.
<style>
p {
text-align: start;
}
</style>
<p>Start aligns with the writing direction.</p>
<p dir="rtl">في العربية، البداية على اليمين.</p>start means the beginning of the inline direction.dir="rtl", start matches the right edge.If alignment looks wrong, one of these is usually why.
text-align: center centers text inside the element. To center a block horizontally, use margin-inline: auto, flexbox, or grid on the parent.
left / right do not flip in RTLPhysical edges stay fixed. Prefer start / end when layout must follow direction.
Uneven word gaps may be harder for some readers. Avoid justify in narrow columns; tune last-line behavior with text-align-last.
Setting text-align on a parent affects nested blocks and cells unless a child overrides it.
-moz-center and -webkit-center are non-standard. Use the standard center keyword.
text-align is a browser CSS property for inline content alignment. Node.js, Deno, and Bun do not apply it.
left, right, center, and justify are universal. start and end are widely supported in modern browsers. match-parent is newer than the core set.
Bottom line: Safe to teach for left, right, center, and justify everywhere. Prefer start/end in modern multilingual pages. It is not a runtime API.
One line: put text-align on the block that holds the text — it moves the content, not the box.
Learn how to align the last line of a block, especially with justified text.
8 people found this page helpful