The MUI Typography component is excellent for precisely styling text. Typography can also be used to align text inside of a wrapping Box, Stack, or other component. In this tutorial we will add flex
to the parent to align the Typography component.
We will create the five examples below. The first three are wrapped in a Box, the last two are wrapped in a Stack component (just to show syntax differences).

Full React code and related links are in the Resources section.
Typography Default Behavior
Adding display: flex
to elements wrapping Typography (or any other component) can cause surprising behavior. Take a look at this list of flexbox consequences to understand the examples better.
Here is the default behavior:
- Typography is a
p
element and will expand horizontally to fill its parents width - With
display: flex
added and the defaultflexDirection: row
, Typography will expand vertically instead of horizontally
Here are some styling behaviors I implemented that impact the demo:
alignItems
– I used this for vertical alignment when flexDirection is ‘row’ but it has the interesting side effect of compressing the height of child componentsmaxHeight: 1.5rem
– This limits the vertical expansion when flexDirection is ‘row’ and alignItems is not appliedjustifyContent
does not seem to have the same effect of reducing width
An alternative to maxHeight is to set alignItems: 'start'
on all parent containers (Boxes and Stacks). This will limit the vertical stretching without changing the default position. Interestingly, ‘start’ is not the default value for alignItems.
In the examples below I added size, border, and background color to the Typography component using the styled
API, which is why you see StyledTypography in the code.
Vertically Center MUI Typography
The Typography component can be vertically centered by adding display: 'flex'
and alignItems: 'center'
. In the Box component (and all components except Stack), default flexDirection is ‘row’.

The align-items
CSS property aligns items along the cross axis, which is the vertical axis by default (in other words, when flexDirection is ‘row’).
<Box sx={{ display: 'flex', alignItems: 'center', ...defaultStyling }}>
<StyledTypography>Vertical Align Center</StyledTypography>
</Box>
Vertically Align Bottom MUI Typography
The Typography component can be vertically aligned to the bottom by adding display: 'flex'
and alignItems: 'end'
. Notice that this syntax is different than the ‘flex-end’ value associated with justify-content.
<Box sx={{ display: 'flex', alignItems: 'end', ...defaultStyling }}>
<StyledTypography>Vertical Align Bottom</StyledTypography>
</Box>

Horizontally Align Right MUI Typography
The Typography component can be right aligned in a Box component by adding display: 'flex'
and justifyContent: 'flex-end'
. The default justify-content value is ‘flex-start’.
This Typography component would have expanded vertically to fill the height if I had not added maxHeight: '1.5rem'
in the StyledTypography component.
<Box sx={{ display: 'flex', justifyContent: 'flex-end', ...defaultStyling }}>
<StyledTypography>Right Align</StyledTypography>
</Box>

Horizontally Center MUI Typography
The Typography component can be horizontally center aligned with display: 'flex'
and justifyContent: 'center'
. Stack has display: 'flex'
by default.
In this example I used a Stack component. It is new in MUI v5 and can have flex properties applied directly to the component, instead of through the sx
prop. However, the default Stack flexDirection is ‘column’, so I needed to specify direction='row'
to get behavior more typical of other components.
<Stack direction='row' justifyContent='center' sx={defaultStyling}>
<StyledTypography>Center Align</StyledTypography>
</Stack>

Horizontally Align Left MUI Typography
The Typography component is horizontally left aligned by default. However, if you are using Stack as the wrapper then the Typography component will stretch to fill the horizontal space.
To fix this, add direction: 'row'
. Also add alignItems: 'start'
if you don’t have a maxHeight set on the Typography componetn.
<Stack direction='row' sx={defaultStyling}>
<StyledTypography>Left Align</StyledTypography>
</Stack>

Resources
Here is how to add italic, bold, and ellipses to the Typography component, and here’s how to change Typography font size. The Typography component is also a good way to set text color in an app, but we can also set a global text color using a single selector.
Here is the full code for this example:
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";
const StyledTypography = styled(Typography)(({ theme }) => ({
borderRadius: 4,
border: '1px solid',
borderColor: theme.palette.primary.main,
backgroundColor: 'gold',
maxHeight: '1.5rem',
padding: 4,
margin: 8
}));
const defaultStyling = {
border: '1px solid gray',
backgroundColor: 'rgba(20,20,20,0.4)',
width: 300,
height: 100
}
export default function AlignedTypography() {
return (
<div>
<Box sx={{ display: 'flex', alignItems: 'center', ...defaultStyling }}><StyledTypography>Vertical Align Center</StyledTypography></Box>
<Box sx={{ display: 'flex', alignItems: 'end', ...defaultStyling }}><StyledTypography>Vertical Align Bottom</StyledTypography></Box>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', ...defaultStyling }}><StyledTypography>Right Align</StyledTypography></Box>
<Stack direction='row' justifyContent='center' sx={defaultStyling}><StyledTypography>Center Align</StyledTypography></Stack>
<Stack direction='row' sx={defaultStyling}><StyledTypography>Left Align</StyledTypography></Stack>
</div>
);
}