typography
text-align
Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.
text-align: start | end | left | right | center | justify | match-parentCommon values
| Value | Effect |
|---|---|
| start | Aligns to the start edge in current writing direction |
| center | Centers inline content horizontally |
| end | Aligns to the end edge in current writing direction |
| justify | Stretches lines to both edges |
| left | Physical left alignment regardless of language |
| right | Physical right alignment regardless of language |
Examples
.hero { text-align: center; }Centered hero copy
article p { text-align: start; }Left-aligned in LTR, right-aligned in RTL
.prose { text-align: justify; hyphens: auto; }Justified paragraphs with automatic hyphenation
Gotcha
text-align does not center block-level children; use margin: auto or a flex container for that.
Related properties
font-size
Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.
line-height
Sets the vertical distance between lines of text. Unitless values are preferred because they scale with the element's own font size.
text-decoration
Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.
font-family
Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.