Text

Text Align

Style syntax for setting the text alignment of an element.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
text-align:align / text:align / t:aligntext-align: align
text:lefttext-align: left
text:righttext-align: right
text:centertext-align: center
text:justifytext-align: justify
text:starttext-align: start
text:endtext-align: end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.

<p class="text:left">Lorem ipsum dolor sit amet …</p>

Align contents to the left

Use text:left to align contents to the left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.

<p class="text:left">Lorem ipsum dolor sit amet …</p>

Align contents to the right

Use text:right to align contents to the right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.

<p class="text:right">Lorem ipsum dolor sit amet …</p>

Center contents

Use text:center to center contents.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.

<p class="text:center">Lorem ipsum dolor sit amet …</p>

Align contents to the left and right

Use text:justify to align contents to the left and right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.

<p class="text:justify">Lorem ipsum dolor sit amet …</p>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="text:left:hover text:left@sm text:left@dark text:left@print"></div>
PREVIOUS
Border Collapse

Style syntax for setting whether table cell have shared or separate borders.

NEXT
Text Decoration

Style syntax for setting the appearance of decorative lines on text.

MIT License © Aoyue Design LLC.