How to Align MUI Typography (Vertically/Center/Right/Left)

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 default flexDirection: 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 components
• maxHeight: 1.5rem – This limits the vertical expansion when flexDirection is ‘row’ and alignItems is not applied
• justifyContent 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>
  );
}

MUI Typography Docs