31. Text Alignment and Justification (text-align)
The text-align property controls the horizontal alignment of inline content (text, images, spans, etc.) within a block-level container.
Alignment Values
| Value | Description |
|---|---|
left (default) | Aligns content to the left side of the container. |
right | Aligns content to the right side of the container. |
center | Centers the content horizontally. |
justify | Stretches the text lines so that every line has equal width (often used in print, but can look awkward on web). |
css /* Center all text within the header */ header { text-align: center; }
/* Align paragraphs to the left (often default, but good for explicit control) */ p { text-align: left; }
/* Useful for copyright footers */ footer p { text-align: right; }
Important Distinction: Text vs. Block Alignment
text-align: center; only centers inline content (like text and images) within the element. It does not center the block-level element itself. (To center a block element, you use margin: 0 auto; along with a defined width, as seen in Lesson 14).