title: Centre the Typography
body: <p>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</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 = () =&gt; {
        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 (
          &lt;StyledAppBar&gt;
            &lt;StyledToolbar&gt;
              &lt;Logo src={logo} alt="quizy" /&gt;
              &lt;Typography variant="h5" color="black" align='center'&gt;
                Question
              &lt;/Typography&gt;
              &lt;AccountCircleIcon
                style={{ color: "black" }}
               
              /&gt;
            &lt;/StyledToolbar&gt;
          &lt;/StyledAppBar&gt;
        );
      }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Page Result</strong><br />
  <img src="https://i.stack.imgur.com/4aYR8.png" alt="Page Result" /></p>