Appbar Flex中的中心按钮

Question

我无法对齐/对齐AppBar中的居中按钮。 看起来像这样（请参见demo here）：

<AppBar position='sticky'>
  <Toolbar>
      <div className={classes.topMenuBoxes}>
        <img className={classes.logoSize} src={LogoFull} alt="logo" ></img>
      </div>
      <div className={classes.topMenuBoxes}>
        <Button className={classes.menuText} color='inherit' >Offer</Button>
        <Button className={classes.menuText} color='inherit' >Join</Button>
        <Button className={classes.menuText} color='inherit' component={AboutLink}>About us</Button>
      </div>
      <div className={classes.topMenuBoxes}>
        <DropMenu />
      </div>
  </Toolbar>
</AppBar>

...并使用以下makeStyles：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  logoSize: {
    marginTop: '30px',
    height: '70px',
  },
  menuButton: {
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
    marginRight: theme.spacing(2),
  },
  menuText: {
    [theme.breakpoints.down('sm')]: {
      display: "none",
    },
    textTransform: 'none',
  },
  topMenuBoxes: {
    flex: 1,
  },
}));

如何在引用class.topMenuBoxes的div中对齐内容？

谢谢！

Answer 1

将textAlign:"center"添加到您的topMenuBoxes：

const useStyles = makeStyles(theme => ({
  // ...

  topMenuBoxes: {
    flex: 1,
    textAlign: "center"
  }
}));