应用栏中 flex 中的居中按钮

Question

我在应用栏中对齐/对齐为居中按钮时遇到问题。 它看起来像这样(请参阅此处的演示(：

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

如何对齐我引用 classes.topMenuBox 的div 内的内容？

谢谢！

Answer 1

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

const useStyles = makeStyles(theme => ({
// ...
topMenuBoxes: {
flex: 1,
textAlign: "center"
}
}));