我正在使用Material-UI构建一个React App，无法弄清楚如何在蓝色AppBar中将3个选项卡居中。当前，它们都是左对齐的，例如：
https://i.imgur.com/MjQIuBl.png（还不能嵌入图片，我很抱歉）
这是我的代码：
<div>
{/* Tabs */}
<AppBar position="static" color="primary" style={{ position: 'fixed' }}>
<Tabs
fullWidth={true}
value={this.state.value}
onChange={this.handleChange}
indicatorColor="secondary"
>
<Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" />
<Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" />
<Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" />
</Tabs>
</AppBar>
</div>
我从相似的问题中尝试了许多不同的CSS属性，但是还没有接近。谢谢你的帮助！
尝试将“居中”添加到Tabs组件，如下所示：
<div>
{/* Tabs */}
<AppBar position="static" color="primary" style={{ position: 'fixed' }}>
<Tabs
fullWidth={true}
value={this.state.value}
onChange={this.handleChange}
indicatorColor="secondary"
centered
>
<Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" />
<Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" />
<Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" />
</Tabs>
</AppBar>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句