Horizontally centering tabs in Material-UI AppBar with ReactJS

Question

I'm building a React App with Material-UI and can't figure out how to center the 3 tabs within the blue AppBar. Currently, they are all left-aligned, as such:

https://i.imgur.com/MjQIuBl.png (can't embed images yet, my apologies)

Here is my code:

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

I've experimented with a lot of different CSS properties from similar questions but haven't gotten close. Thanks for your help!

Answer 1

Try adding "centered" to the Tabs components, like this:

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

Answer 2

If the centered property is not working for you, you may try the CSS API (tested with Material-UI 3.7.0). This also gives you a bit more control if you desire:

 import { Tabs, withStyles } from '@material-ui/core'; export const CenteredTabs = withStyles({ flexContainer: { justifyContent: 'center', alignItems: 'center', }, })(Tabs); 

Answer 3

This may solve your problem in newer versions of MUI:

<Tabs
     sx={{ margin: "auto" }}
>