Text Align
Style syntax for setting the text alignment of an element.
Overview [sr-only]
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>