logo

Air CSS ver. 2.3.2

Text align

Text alignment is a small but significant part of the interface. Alignment affects how our brain scans the content on a screen. A proper text alignment is one of the most distinct indicators of a professionally crafted digital product.

Mnemonics

Bases
Modifiers
Optional extensions
t = text-align

l = left
r = right
c = center
j = justify

-m = medium width container
-l = large width container

Examples

<p class="tl">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati! 
<p class="tr">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati! 
<p class="tc">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati! 
<p class="tj">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati!

Source code

/* generate: container-rule */
.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }

.tj  {
  text-align: justify;
  hyphens: auto;
}
/* end generate */