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!

score 16 · Accepted Answer · answered Mar 05 '18 at 00:15

16

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>

answered Mar 05 '18 at 00:15

Kevin Gelpes

581
4
6

That did it! So what's the difference between `centered` and something like `align-content: center`? – Zach Brown Mar 05 '18 at 00:19
1

@ZachBrown `align-content` is used to control flexbox. `centered` is a prop for the `Tabs` component which applies certain styles defined in Material UI to get the tabs to be centered – Kevin Gelpes Mar 05 '18 at 00:31
If `fullWidth={true}` does not work try `variant="fullWidth"`; It was for my case – papigee May 11 '20 at 13:51

score 2 · Answer 2 · answered Dec 27 '18 at 15:39

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

answered Dec 27 '18 at 15:39

abnormi

628
1
7
15

This snippet is outdated. Material-UI is now available in version 4.8 and a lot has changed since Dec 2018 – abnormi Jan 31 '20 at 08:11

score 1 · Answer 3 · answered Oct 04 '22 at 12:06

1

This may solve your problem in newer versions of MUI:

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

answered Oct 04 '22 at 12:06

Archer

11
5

Adding `margin: 'auto',` to my sx prop worked perfectly thank you I had tried the with flexbox and it just wasn't working. – James F. Thomas May 02 '23 at 21:19

Horizontally centering tabs in Material-UI AppBar with ReactJS

3 Answers3