在材质 UI 中居中网格项目

Question

我尝试将 Material UI 的网格项居中，但我无法实现这一点。文档说你可以使用 justifyItems 和alignItems 道具，但我无法通过使用这个来实现这一点。有什么帮助吗？

我尝试使用下面的示例，但我不确定这里出了什么问题。网格项目从头开始。

const HeaderCopy: React.FC = () => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };
    return (
        <AppBar>
            <Grid container  alignItems="center" justifyContent="center">
                <Grid item xs={3}>
                    <img src="/public/logo.png" />
                </Grid>
                <Grid item xs={6}>
                    <Typography component="div">ALl IS WELL</Typography>
                </Grid>
                <Grid item xs={3}>
                    <IconButton
                        size="large"
                        aria-label="account of current user"
                        aria-controls="menu-appbar"
                        aria-haspopup="true"
                        onClick={handleMenu}
                        color="inherit"
                    >
                        <AccountCircle />
                    </IconButton>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                            vertical: "bottom",
                            horizontal: "right",
                        }}
                        keepMounted
                        transformOrigin={{
                            vertical: "top",
                            horizontal: "right",
                        }}
                        open={Boolean(anchorEl)}
                        onClose={handleClose}
                    >
                        <MenuItem>Home</MenuItem>
                        <MenuItem>My Profile</MenuItem>
                        <MenuItem>My Settings</MenuItem>
                        <MenuItem>Logout</MenuItem>
                    </Menu>
                </Grid>
            </Grid>
        </AppBar>
    );
}

Answer 1

您必须像这样将每个

Grid

的项目居中

<Grid item xs={3} display={"flex"} justifyContent="center">

这是你所期待的吗？