Is there a prop in Material UI that allows to center everything inside a grid?

Viewed 49

I am learning to use Material UI and I cannot figure out something that should be easy.

Given the card below

enter image description here

I want to make all the content centered except for the abcd, efgh, ijkl lines. This is the final result I would like to have:

enter image description here

And This is the code:

   <Grid container spacing={4}  >
      <Grid item xs={12} sm={6} md={4}>
        <Card style={{ padding: '30px 40px 20px'}} >
          <CardContent>
            <Typography variant="h4" color="textSecondary" >
              TEST
            </Typography>
            <Typography color="textSecondary">Something in here</Typography>
            <Divider />
            <Grid container justify={'space-between'}>
              <Typography item color="textSecondary">
                abcd
              </Typography>
              <Typography item color="textSecondary">
                25
              </Typography>
            </Grid>
            <Grid container justify={'space-between'}>
              <Typography color="textSecondary">efgh</Typography>
              <Typography color="textSecondary">15</Typography>
            </Grid>
            <Grid container justify={'space-between'}>
              <Typography color="textSecondary">ijkl</Typography>
              <Typography color="textSecondary">05</Typography>
            </Grid>
          </CardContent>
          <CardActions disableSpacing>
            <Button variant="contained" color="primary">
              Action 1
            </Button>
            <Button variant="contained" color="primary">
              Action 2
            </Button>
          </CardActions>
        </Card>
      </Grid>
    </Grid>

I could get the result by giving to the Typograhy elements a style={{textAlign: 'center'}} and to the CardActions a style={{display: 'flex', justifyContent: 'space-between'}} but I was wondering if there is a better way, like a MUI prop to give to grid container that tells to center align everything inside. I tried giving the grid a justify='center' but it is not doing anything.

0 Answers
Related