How can I center Logo and text in material-ui Appbar?

Question

I use Material-Ui Appbar and want to simply center my logo and title in the middle (See the picture).

But I tried different methods, still nothing works. Following is my code, do you know what's wrong with my code?

You can also try the code in codesandbox:

https://codesandbox.io/s/material-ui-appbar-logo-7q80d?file=/src/MyAppBar.tsx:797-1455

Here is my clasess:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1,
      textAlign: "center"
    },
    logo: {
      maxWidth: 40,
      marginRight: '10px'
    }
  })
);

Here is my component code:

export function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <img src={logo} alt="Kitty Katty!" className={classes.logo} />
          <Typography variant="h6" className={classes.title}>
            Kitty Katty!
          </Typography>

          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Thanks very much for the help!

Answer 1

    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>          
          <Typography variant="h6" className={classes.title} id="appBar">
            <img src={logo} alt="Kitty Katty!" className={classes.logo} /> 
            Kitty Katty!
          </Typography>

          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>

Then in your style.css add this

#appBar {
  display: flex;
  justify-content:  center;
  align-items: center;
}

Answer 2

import React from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import logo from "./images/logo.png";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    toolbar:{
      justifyContent:'space-between'
    },
    container:{
      display:'flex',
      alignItems:'center',
    },
    title: {
      flexGrow: 1,
      textAlign: "center"
    },
    logo: {
      maxWidth: 40,
      marginRight: '10px'
    }
  })
);

export function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar classes={{root:classes.toolbar}}>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <div className={classes.container}>
          <img src={logo} alt="Kitty Katty!" className={classes.logo} />
          <Typography variant="h6" className={classes.title}>
            Kitty Katty!
          </Typography>
          </div>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Answer 3

Try this:

  <Typography variant="h6" className={classes.title}>
    <img src={logo} alt="Kitty Katty!" className={classes.logo} />
    Kitty Katty!
  </Typography>