I am learning to use Material UI and I cannot figure out something that should be easy.
Given the card below
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:
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.

