I am having difficulty centering the grid items of material UI. I have tried using the justifyItems and alignItems props as mentioned in the documentation, but I'm still unable to achieve the desired result. Can anyone provide some guidance?
Below is an example of what I have tried, but the grid items seem to be aligning from the beginning instead of being centered:
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>
);
}