Use the CSS text-align property to control how text sits horizontally within its container. The values shown here are left, right, center, and justify. Pick the alignment that suits the content: centered text for a profile card, right-aligned numbers in a cart, or justified paragraphs for a newspaper-style column. section 7.1.2 section 6.5.2 section 8.4.2
A few small declarations make visibly different layouts:
- For a profile card, `.card { text-align: center; }` centers its text. It also centers an image that is inline by default; a separate negative top margin can then pull the image above the card. section 6.5.2
- For newspaper-style paragraphs, `p { text-align: justify; hyphens: auto; }` makes line endings more even. Justification spreads extra space across a line; automatic hyphenation can reduce that space. In a fluid layout, the browser can choose how to distribute it. section 4.5.1
- For a cart, `th { text-align: left; }` can align the first headers left, while a more specific column selector keeps number columns right-aligned. `input[type="number"] { text-align: right; }` aligns the contents of number fields at every screen size when placed outside media queries. section 8.4.2 section 8.4.3
Use text-align when horizontal placement alone does the job. A credit-card security-code label needs only `text-align: right` on its container. Its separate white band uses Flexbox instead because the contents also need vertical alignment. Be cautious with justified body text: it conflicts with a WCAG AAA accessibility requirement. section 9.2.3 section 7.1.2
Listing 8.26 Updating the table header rules
@media (min-width: 550px) {
th { text-align: left }
th:nth-of-type(n+3),
td:nth-of-type(n+3) {
text-align: right;
}
}
Compare the general `th` rule with the more specific rule that overrides alignment for later table columns. section 8.4.2
