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

Posted 2023-02-22

【中文标题】React - 网格内的材质 UI 项目拒绝居中

【英文标题】：React - Material UI Items inside the grid refuse to center

【发布时间】：2021-10-19 00:29:39

【问题描述】：

我想将卡片放在网格项目的中心，但它不起作用。 正如我从文档 (https://material-ui.com/components/grid/) 中了解到的那样，我应该使用 justifyContent="center" 但这不起作用，并且在堆栈溢出 (How to center a component in Material-UI and make it responsive?) 的答案之一中，有人使用 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>

【参考方案1】：

您可以删除 xs 和 md 并将 justifyContent 更改为 space-around 以在它们之间提供适当的间距。看看代码沙箱。 Here

【讨论】：

我明白了，但这仍然不能解释为什么“justifyContent”不起作用，你知道为什么吗？