React - Material UI网格内的项目拒绝居中

Question

我想把卡片放在网格项的中间，但是不行。正如我从文档(https://material-ui.com/components/grid/)中理解的那样，我应该使用justifyContent="center"但这不起作用，在堆栈溢出(如何在Material-UI中居中组件并使其响应?)的答案之一中，有人使用了justify="center"所以我也试过了，但是没有用。

<Grid container justifyContent="center">
<Grid item xs={12} md={4} >
<Card style={{maxWidth: 345}}>
<CardActionArea>
<CardMedia
style={{height: 140}}
image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography variant="h5" component="h2">
Lizard
</Typography>
<Typography gutterBottom variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
<Typography gutterBottom varient="h5" color="Secondary">
100
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4}>
<Card style={{maxWidth: 345}}>
<CardActionArea>
<CardMedia
style={{height: 140}}
image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography variant="h5" component="h2">
Lizard
</Typography>
<Typography gutterBottom variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
<Typography gutterBottom varient="h5" color="Secondary">
100
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4}>
<Card style={{maxWidth: 345}}>
<CardActionArea>
<CardMedia
style={{height: 140}}
image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography variant="h5" component="h2">
Lizard
</Typography>
<Typography gutterBottom variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
<Typography gutterBottom varient="h5" color="Secondary">
100
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>

Answer 1

可以去掉xs和md，将justifyContent改为space-around，使它们之间有适当的间距。看看代码沙箱。