如何在 material-ui Appbar 中居中徽标和文本？

Question

我使用 Material-Ui Appbar 并且想简单地将我的徽标和标题居中（见图）。

但我尝试了不同的方法，仍然没有任何效果。以下是我的代码，你知道我的代码有什么问题吗？

你也可以试试codesandbox中的代码：

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

这是我的课：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    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>
          <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>
  );
}

非常感谢您的帮助！

Answer 1

试试这个：

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

然后在你的 style.css 中添加这个

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