How to Horizontally Center an element inside a MUI Typography Component

Question

I am using the MUI V5 in a react project and I am trying to center the logo in an AppBar on extra small screens but no mattter what I do nothing seems to be working. The Typography comonent is wrapped inside a ToolBar wrapped inside an AppBar that only appears on xs screens. Here's my current code.

  <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar
        elevation={0}
        position="fixed"
        sx={{
          display: { xs: 'flex', sm: 'none' },
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
          bgcolor: 'gray',
        }}
      >
        <Toolbar >
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>

      
            <Typography
              variant="h5"
              noWrap
              component="a"
              href=""
              sx={{
                flexGrow: 1,
                bgcolor: 'red',
             
                display: { xs: 'flex', sm: 'none' },
   
                flexGrow: 1,
                fontFamily: 'monospace',
                fontWeight: 700,
                letterSpacing: '.3rem',
                color: 'inherit',
                textDecoration: 'none',
              }}
            >
              LOGO
            </Typography>
     
        </Toolbar>
      </AppBar>

I have throw everything I can at it but nothing seems to work. Any help is highly appreaciated.

Answer 1

Best Way to handle spacing with MUI is using Grid component. Your code would be like this:

return (
  <Box sx={{ display: "flex" }}>
    <CssBaseline />
    <AppBar
      elevation={0}
      position="fixed"
      sx={{
        display: { xs: "flex", sm: "none" },
        width: { sm: `calc(100% - ${drawerWidth}px)` },
        ml: { sm: `${drawerWidth}px` },
        bgcolor: "gray",
      }}
    >
      <Toolbar>
        <Grid
          container
          spacing={1}
          sx={{ alignItems: "center", justifyContent: "space-between" }}
        >
          <Grid item xs={4} sx={{ textAlign: "start" }}>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              // onClick={handleDrawerToggle}
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
          </Grid>
          <Grid item xs sx={{ textAlign: "center" }}>
            <Typography
              variant="h5"
              noWrap
              component="a"
              href=""
              sx={{
                bgcolor: "red",
                fontFamily: "monospace",
                fontWeight: 700,
                letterSpacing: ".3rem",
                color: "inherit",
                textDecoration: "none",
              }}
            >
              LOGO
            </Typography>
          </Grid>
          <Grid item xs={4}></Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  </Box>
);

MUI Grid docs

Answer 2

Not a big expert in MUI, but try defining the flex direction, then define the align items or justify content to be centre depending on the direction.