CSS / Reference / text-align: Text, Inline Content, and Block Alignment

text-align aligns text and inline content within a block. It does not center the block’s own box; start and end follow writing direction, unlike physical left and right.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.copy { text-align: start; }
.title { text-align: center; }

For supported values and conditions, see MDN text-align.

Run the example and compare results

Save this complete code as css-reference-10692-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-align comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 260px; padding: 12px; border: 1px solid #718096; }
.target { text-align: center; }
.reference { text-align: justify; }
</style>
</head>
<body>
<main id="demo">
<h1>text-align comparison</h1>
<section class="samples"><div class="a"><p class="label">center</p><div class="target">Compare alignment within this paragraph. Inspect the gaps in full lines and in a short final line.</div></div><div class="b"><p class="label">justify</p><div class="reference">Compare alignment within this paragraph. Inspect the gaps in full lines and in a short final line.</div></div></section>
</main>
</body>
</html>

Center places each line centrally. Justify adjusts spacing to align line edges, while a short final line normally behaves differently.

The box versus its inline content

Parent text-align can affect inline and inline-block children but does not automatically center an ordinary block’s width and margins. Use margin-inline: auto or the appropriate layout-container alignment for the block itself.

Justification and readability

A narrow line with long English words can produce large gaps. Inspect language-sensitive wrapping, hyphenation, and width. text-align-last separately controls the final line; choose readable default alignment rather than applying justify everywhere.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

1. Change only text-align among start, end, center, and justify on the same paragraph. Inspect the first and last lines, then test text-align-last separately and restore it.
2. Use suitable directional content to compare start/end with left/right under dir="rtl", then restore the original direction. Test centering the block separately with margin-inline:auto.

Add dir="rtl" to the first file’s .target start tag and replace its content with the Arabic sentence below. Change only text-align among start, end, left, and right. Start follows the right edge and end the left; left/right remain physical. Restore the original direction and content afterward.

<div class="target" dir="rtl" lang="ar">هذا نص عربي لمقارنة محاذاة الفقرة واتجاه الكتابة.</div>

Block centering is a separate condition. Temporarily remove the first file’s Flex layout on .samples, apply margin-inline:auto to .target, inspect its containing content area, then restore both changes.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are word-break, text-indent.

When the result is missing or unexpected

• Identify whether the alignment target is the box or its inline content.
• Inspect available width and language before masking justification gaps with global break-all.