text-align
Horizontal alignment of text and inline content inside a block.
Syntax
text-align: value;Values
| Parameter | Type | Description |
|---|---|---|
| left | keyword | To the left edge. |
| center | keyword | Centered. |
| right | keyword | To the right edge. |
| justify | keyword | Stretched to both edges by widening the spaces. |
| start | end | keyword | The start or end of the line in the text direction — useful for right-to-left languages. |
Examples
Three kinds of alignment:
<p style="text-align: left;">Left</p>
<p style="text-align: center;">Center</p>
<p style="text-align: right;">Right</p>Inline elements like buttons and images also follow text-align:
<div style="text-align: center; background: lavender; padding: 8px;">
<button>Inline content is centered too</button>
</div>Notes
text-align aligns content inside the block, not the block itself. To center a block, use margin: 0 auto or flexbox. Justified text on a narrow screen produces big gaps between words.
See also
- vertical-align — Vertical alignment of an inline element within a line, or of content in a table cell.
- justify-content — Distributes items along the main axis of a flex or grid container.
- text-indent — The indent of the first line of a block.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.