卡片不在纸上居中 - Material-ui React App

Question

我正在尝试使用 Material-ui 将一些动态生成的卡片居中放置在纸上，但有些东西会导致它们始终粘在纸的左侧。我使用 Inspect Element 来查看它的外观，似乎包含每张卡片的 Grid 实际上在右侧更宽，我不知道是什么原因造成的。

// useStyles

const useStyles = makeStyles({
    root: {
        maxWidth: "12vw",
        marginTop: '0.9vw',
        marginLeft: '0.9vw',
        marginBottom: '0.9vw',
        marginRight: '0'
    },
        media: {
        height: 0,
        paddingTop: '150%',
        objectFit: 'cover',
    },
    body: {
        alignSelf: 'end',
        textAlign: 'center',
        justifyContent: 'center',
    },
    actions: {
        justifyContent: 'center',
        fullWidth: true
    },
    customWidth: {
        maxWidth: 500,
      },
});

这是所有东西的主网格

<Grid container>

    <Paper style={{ margin: "auto", width: 'auto', padding: '0', background: '#221211', overflow:'auto', maxWidth:'100%', textAlign: 'center' }} elevation={0}>
                    
    <Grid container justify="space-between" style={{ background:"transparent" }}>

        { data.map( (carte, index) => (
                
            <Grid xs={3} key={index}>
                        
                <Card className={classes.root}>
                    <Link to = {{ pathname:'/view-book', state: { data: data[index] } }} className={classes.actions} color="primary">
                        <CardActionArea style={{ maxWidth:"12vw" }}>
                            <CardMedia className={classes.media} fullWidth image={data[index].cover} title={data[index].title}></CardMedia>
                                <CardContent>
                                    <Typography noWrap gutterBottom color="textPrimary" variant='body1' component="h2">
                                    {data[index].title}
                                    </Typography>
                                    <Typography noWrap variant="body2" color="textSecondary" component="p" style={{ marginBottom:'0px' }}>
                                    {data[index].description}
                                    </Typography>
                                </CardContent>
                        </CardActionArea>
                    </Link>
                        <CardActions className={classes.actions}>
                            <Button style={{ fontSize: "0.7vw" }}  startIcon={<AddShoppingCart />} aria-label="wishlist" color="primary" variant="outlined">adaugă în wishlist</Button>
                        </CardActions>
                        
                </Card>
                        
            </Grid>
                    
        ))
        }

    </Grid>

    </Paper>

</Grid>

This is how it looks when I check it with Inspect Element

除了 Link 组件之外的所有东西都是从 Material-ui 导入的。

Answer 1

你需要添加这个样式

display: "flex",
justifyContent: "center"

到Grid组件如下：

<Grid
          container
          justify="space-between"
          style={{
            background: "transparent",
            display: "flex",
            justifyContent: "center"
          }}
        >

sandbox link