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.