I tried to centre the typography using both textAlign and align but that did not work. Can someone help me with this ? The resulting page is below the code

    import React, {useState} from 'react'
    import logo from '../../images/logo.svg'
    import { Typography } from '@mui/material'
    import AccountCircleIcon from "@mui/icons-material/AccountCircle"

    const NavBar = () => {
      const StyledToolbar = styled(Toolbar)({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between"
      });

      const Logo = styled("img")({
         width: "12rem",
         height: "auto",
      });

      const StyledAppBar = styled(AppBar)({
         position: "sticky",
         backgroundColor: "#EDEDED",
      });

      return (
        <StyledAppBar>
          <StyledToolbar>
            <Logo src={logo} alt="quizy" />
            <Typography variant="h5" color="black" align='center'>
              Question
            </Typography>
            <AccountCircleIcon
              style={{ color: "black" }}
             
            />
          </StyledToolbar>
        </StyledAppBar>
      );
    }

Page Result

CodePudding user response：

It actually is centered according to its width. To center with 3 children elements you could assign Logo, Typography and Icon following CSS properties:

flex-grow: 1 flex-basis: 0

This will probably move the AccountCircleIcon a bit to the left but you can assign it margin-left: auto. You will also have to remove your assigned width of Logo. For example:

import React, {useState} from 'react'
import logo from '../../images/logo.svg'
import { Typography } from '@mui/material'
import AccountCircleIcon from "@mui/icons-material/AccountCircle"

const NavBar = () => {
  const StyledToolbar = styled(Toolbar)({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between"
  });

  const Logo = styled("img")({
     width: "12rem",
     height: "auto"
  });

  const StyledAppBar = styled(AppBar)({
     position: "sticky",
     backgroundColor: "#EDEDED",
  });

  return (
    <StyledAppBar>
      <StyledToolbar>
        <div style={{ flexGrow: 1, flexBasis: 0 }}>
          <Logo src={logo} alt="quizy" />
        </div>
        <Typography style={{ flexGrow: 1, flexBasis: 0 }} variant="h5" color="black" align='center'>
          Question
        </Typography>
        <div style={{ flexGrow: 1, flexBasis: 0, textAlign: "right" }}>
          <AccountCircleIcon
            style={{ marginLeft: 'auto', color: "black" }}
          />
        </div>
      </StyledToolbar>
    </StyledAppBar>
  );
}