Text Alignment

Wind provides an easy way to control text alignment using the text- prefix. This feature allows you to align text in various directions, such as left, center, right, justify, or based on the reading direction (start or end).

Syntax

text-[alignment]
  • alignment: The direction in which the text should be aligned (e.g., left, center, right, justify, start, end).

Predefined Alignments

Wind comes with the following predefined text alignment options:

Class Alignment Explanation
text-left Left Aligns text to the left.
text-center Center Centers the text.
text-right Right Aligns text to the right.
text-justify Justify Justifies the text.
text-start Start Aligns text to the start.
text-end End Aligns text to the end.

Example: Applying Text Alignment

Center-Aligned Text

WText(
  'Centered Text',
  className: 'text-center',
)

Here, the text is centered using the text-center class.

Right-Aligned Text

WText(
  'Right-Aligned Text',
  className: 'text-right',
)

In this example, the text is aligned to the right using the text-right class.

Justified Text

WText(
  'This text is justified. The edges are evenly aligned, creating a clean and formal look.',
  className: 'text-justify',
)

Here, the text is justified using the text-justify class.