CODEWITHSUNDEEP
cssreactjsmaterial-uiappbarcenter-align
Zach Brown
Zach Brown

Reputation: 63

Horizontally centering tabs in Material-UI AppBar with ReactJS

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!

Upvotes: 5

Views: 17158

Answers (3)

Archer
Archer

Reputation: 21

This may solve your problem in newer versions of MUI:

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

Upvotes: 1

abnormi
abnormi

Reputation: 688

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

Upvotes: 2

Kevin Gelpes
Kevin Gelpes

Reputation: 691

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>

Upvotes: 20

Related Questions