text-align
Align inline content to physical or logical edges within a text block.
Overview
| Class | Declarations |
|---|---|
text-left | text-align: left;
|
text-right | text-align: right;
|
text-center | text-align: center;
|
text-justify | text-align: justify;
|
text-start | text-align: start;
|
text-end | text-align: end;
|
text-align:<align> | text-align: <align>;
|
Examples
Align contents to the left
Use text-left to align each line to the physical left edge, regardless of the paragraph’s base direction.
<!-- text-left --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-left">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Align contents to the right
Use text-right to align each line to the physical right edge. The paragraph keeps the same width and position.
<!-- text-right --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-right">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Center contents
Use text-center to center each line’s inline content within the paragraph. Use layout utilities to center the paragraph itself.
<!-- text-center --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-center">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Generated CSS
@layer utilities { .text-center { text-align: center }}Align contents to the left and right
Use text-justify to distribute space across a line so both edges meet the paragraph’s sides. The final line normally stays start-aligned.
<!-- text-justify --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-justify">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Check the spacing at the actual reading width; short lines can produce large gaps between words.
Use logical alignment
text-start and text-end follow the inline direction. In these horizontal paragraphs, start is left for LTR and right for RTL.
<!-- LTR · text-start --><p id="target" lang="en" dir="ltr" class="w:240px max-w:100% m:0 font-md leading:24px text-start">Good tools make room for clear thinking.</p><!-- LTR · text-end --><p id="target" lang="en" dir="ltr" class="w:240px max-w:100% m:0 font-md leading:24px text-end">Good tools make room for clear thinking.</p><!-- RTL · text-start --><p id="target" lang="ar" dir="rtl" class="w:240px max-w:100% m:0 font-md leading:24px text-start">أدوات واضحة تمنح الأفكار مساحة.</p><!-- RTL · text-end --><p id="target" lang="ar" dir="rtl" class="w:240px max-w:100% m:0 font-md leading:24px text-end">أدوات واضحة تمنح الأفكار مساحة.</p>Use physical text-left or text-right only when that physical edge is intentional.
Apply conditionally
Resize the real preview viewport. The text starts at the inline start, centers at sm, and aligns to the inline end at lg. Print restores start alignment.
<!-- Responsive inline alignment --><p id="target" class="w:100% m:0 font-md leading:24px text-start text-start@print text-center@screen@sm text-end@screen@lg">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>The screen-qualified conditions keep viewport breakpoints from overriding the print rule.