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 are written with a declaration of !important. For example:

.text-left, div.modal-body p.text-left { text-align: left; }
body .text-left, html .text-left { text-align: left; }

These selectors provide high specificity, ensuring that the alignment rules take precedence over most other conflicting declarations.

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.