Aligning text in user interfaces is common. Unfortunately, it isn't easy. With Material-UI grids and typography, you can create abstractions that make it a little easier to align text.
Aligning text
How to do it...
If you're trying to align your text horizontally to the left, right, or center, then you can use the align property of your Typography component, as demonstrated in the following code:
<Typography align="center">My Centered Text</Typography>
This is shorthand for using the text-align style, so that you don't have to keep adding CSS to your components for the more common alignment scenarios. However, sometimes you need the ability to align your text both horizontally and vertically...