Text Alignment

Utilities for controlling the alignment of text.

React propsCSS Properties
textAlign={alignment}text-align: {alignment};


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>


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.

Edit this page on GitHub