Text Alignment

Utilities for controlling the alignment of text.

Usage

Control the text alignment of an element using the textAlign="left", textAlign="center", textAlign="right", and textAlign="justify" utilities.

<x.p textAlign="left">Lorem ipsum ...</x.p>
<x.p textAlign="center">Lorem ipsum ...</x.p>
<x.p textAlign="right">Lorem ipsum ...</x.p>
<x.p textAlign="justify">Lorem ipsum ...</x.p>

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property textAlign={{ md: "justify" }} to an element would apply the textAlign="justify" utility at medium screen sizes and above.

<x.div textAlign={{ md: 'justify' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.