text-align
Setting the text alignment of an element.
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>;
|
Alignment changes how each line sits inside the paragraph. Use it to match the reading direction, layout density, and rhythm of the surrounding content.
Examples
Align contents to the left
Use text-left to align contents to the left.
Alignment changes how each line sits inside the paragraph. Use it to match the reading direction, layout density, and rhythm of the surrounding content.
<p class="text-left">Alignment changes how each line sits inside the paragraph.</p>Align contents to the right
Use text-right to align contents to the right.
Alignment changes how each line sits inside the paragraph. Use it to match the reading direction, layout density, and rhythm of the surrounding content.
<p class="text-right">Alignment changes how each line sits inside the paragraph.</p>Center contents
Use text-center to center contents.
Alignment changes how each line sits inside the paragraph. Use it to match the reading direction, layout density, and rhythm of the surrounding content.
<p class="text-center">Alignment changes how each line sits inside the paragraph.</p><p class="text-center">Centered text</p>Generated CSS
@layer utilities { .text-center { text-align: center }}Align contents to the left and right
Use text-justify to align contents to the left and right.
Alignment changes how each line sits inside the paragraph. Use it to match the reading direction, layout density, and rhythm of the surrounding content.
<p class="text-justify">Alignment changes how each line sits inside the paragraph.</p>Use logical alignment
Use text-start and text-end when alignment should follow the writing direction instead of always mapping to physical left or right.
<p class="text-start">Start-aligned content</p><p class="text-end">End-aligned content</p>Use physical text-left and text-right when the design explicitly requires those sides regardless of direction.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="text-start text-center@sm text-end@lg text-start@print">...</div>