Блог

Я пытаюсь центрировать некоторые динамически сгенерированные карточки в бумаге с помощью Material-ui, но что-то происходит так, что они всегда прилипают к левой части бумаги. Я использовал элемент Inspect, чтобы посмотреть, как он выглядит в точности, и кажется, что сетка, содержащая каждую карту, на самом деле шире в правой части, и я не знаю, что это вызывает.

 // 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>
 

Вот как это выглядит, когда я проверяю его с помощью элемента Inspect

Все, кроме компонента ссылки, импортируется из Material-ui.

вам нужно добавить этот стиль

 display: "flex",
justifyContent: "center"
 

к компоненту сетки, как показано ниже:

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

ссылка на песочницу