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

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

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

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

<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;
}