Text Alignment
Utilities for controlling the alignment of text.
| React props | CSS Properties |
|---|---|
textAlign={alignment} | text-align: {alignment}; |
Usage
Control the text alignment of an element using the textAlign="left", textAlign="center", textAlign="right", and textAlign="justify" utilities.
- textAlign=left
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
- textAlign=center
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
- textAlign=right
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
- textAlign=justify
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
<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.
Edit this page on GitHub