text-align
Controls the horizontal alignment of inline content within a block element. A fundamental typography property that determines horizontal placement of text, inline elements, and inline-blocks.
Class List
| Class | CSS | Description |
|---|---|---|
tal | text-align: left | Left align. Default, suitable for body text |
tar | text-align: right | Right align. For numbers, prices, dates |
tac | text-align: center | Center align. For headings, CTAs, hero sections |
taj | text-align: justify | Justify. Newspaper-style column layout |
tas | text-align: start | Logical start alignment. LTR=left, RTL=right |
tae | text-align: end | Logical end alignment. LTR=right, RTL=left |
Visual Comparison
Compares how each text-align value affects text.
Left (default) — tal
The quick brown fox jumps over the lazy dog. This sentence demonstrates the differences between text alignments. Enough length is needed for each alignment to be clearly visible.
Default left alignment. Left edge is even, right edge is ragged
Right — tar
The quick brown fox jumps over the lazy dog. This sentence demonstrates the differences between text alignments. Enough length is needed for each alignment to be clearly visible.
Right edge is even, left edge is ragged
Center — tac
The quick brown fox jumps over the lazy dog. This sentence demonstrates the differences between text alignments. Enough length is needed for each alignment to be clearly visible.
Both edges ragged, aligned around center
Justify — taj
The quick brown fox jumps over the lazy dog. This sentence demonstrates the differences between text alignments. Enough length is needed for each alignment to be clearly visible.
Both edges evenly aligned. Word spacing adjusted
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| Body text, general content | tal | Default alignment with the best readability |
| Headings, hero sections | tac | Anchors the visual center to draw attention |
| Prices, numbers, dates | tar | Aligns digits to the right for easy comparison |
| Long articles, newspaper style | taj | Justified for a clean column layout |
Class Details
taltext-align: left
Default left alignment. Most block elements are left-aligned by default, so use this to reset or when explicit left alignment is needed in responsive layouts. Best alignment for body text.
<!-- Body text (Default) -->
<p class="tal">
Left-aligned body text. In most web content,
this is the most natural and readable alignment.
</p>
<!-- Explicit left alignment in responsive -->
<h2 class="tac md-tal">
Center on mobile, left-aligned on desktop
</h2>tartext-align: right
Right alignment. Used for aligning numbers, prices, dates, and data to the right. Frequently used for amount columns or timestamps in tables.
<!-- Price display -->
<div class="df jcsb aic py12px bb1pxsolid27272A">
<span class="cFAFAFA">Premium plan</span>
<span class="tar cFAFAFA fw700 fs2rem">$49/mo</span>
</div>
<!-- Table price column -->
<table class="w100p bcc">
<tr>
<td class="tal py8px px16px">Product name</td>
<td class="tar py8px px16px">$1,200</td>
</tr>
<tr>
<td class="tal py8px px16px">Shipping</td>
<td class="tar py8px px16px">$5</td>
</tr>
</table>tactext-align: center
Center alignment. Commonly used for headings, CTA button areas, and hero sections. Effective for short text, may reduce readability for long body text.
<!-- Hero section -->
<section class="tac py6rem">
<h1 class="fs4-8rem fw800 cFAFAFA mb16px">
Build Faster
</h1>
<p class="fs16px c71717A mb3-2rem">
Cut your styling time in half with Atomic CSS.
</p>
<button class="bg6366F1 cFFFFFF py12px px3-2rem br8px bn cp fs16px">
Get started
</button>
</section>
<!-- CTA area -->
<div class="tac p2rem bg18181B br8px">
<p class="cFAFAFA mb12px">Start for free now</p>
<button class="bg6366F1 cFFFFFF py8px px2rem br4px bn cp">Sign up</button>
</div>Caution
tac only centers inline content. To center a block element itself, use mxa (margin: 0 auto).
tajtext-align: justify
Justify alignment. Both edges of text align with container edges. Suitable for newspaper/magazine-style column layouts. Note that word spacing may become uneven.
<!-- Newspaper-style column -->
<div class="dg gtcr2-1fr gap3-2rem sm-gtc1fr">
<p class="taj lh1-7">
Justified text is a layout commonly found in newspapers
and magazines. Both ends of the text align with the
container edges, creating a clean column layout.
</p>
<p class="taj lh1-7">
However, in short lines or narrow containers, word gaps
may become excessively wide, so it is best used when
sufficient width is available.
</p>
</div>Caution
Word spacing can become excessively wide in short lines or narrow containers. The last line defaults to left alignment regardless of text-align-last. Use on content with sufficient width.
responsive alignment
Combine with media query prefixes to change text alignment based on screen size.
<!-- Center on mobile, left on desktop -->
<h2 class="tac md-tal">Responsive alignment switch</h2>
<!-- Center on mobile, right on desktop -->
<p class="tac md-tar">Price: $49/mo</p>
<!-- Hero: always center, body: left on desktop -->
<section class="tac">
<h1 class="fs4-8rem fw800 cFAFAFA">Title</h1>
</section>
<article class="tac md-tal">
<p>Body text is left-aligned on desktop.</p>
</article>| Class Combination | Behavior |
|---|---|
tac md-tal | Default center → left below 1024px |
tal sm-tac | Default left → center below 768px |
tac md-tar | Default center → right below 1024px |
taj md-tal | Default justify → left below 1024px |
Tips & Notes
text-align only aligns inline content
text-align only works on inline elements like text, span, img, inline-block. To center a block element, use mxa (margin: 0 auto).
Use justify with sufficient width
taj is effective with wide containers and long text. In short lines or narrow containers, word spacing becomes uneven.
Don't confuse with block centering
tac is inline content horizontal centering, mxa is block element horizontal centering. In flex, use jcc.