Text Alignment

In HTML, paragraphs and text blocks are usually aligned to the left by default. However, Trongate CSS offers three utility classes for controlling text alignment. These are:

1. .text-left
2. .text-right
3. .text-center

Within the internals of Trongate CSS, each of the above text align classes is a plain rule with no !important declaration:

.text-left  { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

These are intentionally written without !important and with minimal specificity, so they compose cleanly with component styles.

Left Alignment

To align text to the left, use the .text-left class. This is the default alignment for text, but you can apply it explicitly if needed.

<p class="text-left">This text is left-aligned.</p>

Here's the result:

Right Alignment

To align text to the right, use the .text-right class. This can be useful for aligning elements like captions, footnotes, or certain types of content.

<p class="text-right">This text is right-aligned.</p>

Here's the result:

Center Alignment

To center text, use the .text-center class. This is commonly used for headings, titles, or any content you want to highlight in the center of the page.

<p class="text-center">This text is centered.</p>

Here's the result:

Summary

Trongate CSS provides three text alignment classes for your convenience:

• .text-left – Aligns text to the left.
• .text-right – Aligns text to the right.
• .text-center – Centers the text horizontally.

All classes use high-specificity selectors to reliably manage text alignment across your website.