CODEWITHSUNDEEP
reactjsmaterial-ui
Konzy262
Konzy262

Reputation: 3117

How to vertically center multiple rows in an AppBar in Material-UI

I'm attempting to vertically center multiple items/rows in a Material-UI AppBar/ToolBar but it doesn't seem to work

This is what I have...

enter image description here

And this is what I would like...

enter image description here

This is my code...

const useStyles = makeStyles(theme => ({
  appBar: {
    height: 200,
    width: `calc(100% - 200px)`,
    marginLeft: 200
  },
  link: {
    display: "flex",
    color: "white"
  },
  icon: {
    marginRight: theme.spacing(0.5),
    width: 20,
    height: 20
  },
  toolbar: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
  },
  drawerPaper: {
    display: "flex",
    width: 200
  }
}));

function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar className={classes.toolbar}>
          <Typography variant="h6" noWrap>
            Payments
          </Typography>
          <Breadcrumbs aria-label="breadcrumb">
            <Link href="/" className={classes.link}>
              <HomeIcon className={classes.icon} />
              Home
            </Link>
            <Link
              href="/getting-started/installation/"
              className={classes.link}
            >
              <HomeIcon className={classes.icon} />
              Reports
            </Link>
          </Breadcrumbs>
        </Toolbar>
      </AppBar>
      // Other stuff

I thought this bit would do it but apparently not

toolbar: {
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-start",
  justifyContent: "center"
},

Code sandbox is here

Thanks,

Upvotes: 1

Views: 1289

Answers (2)

Viraj Singh
Viraj Singh

Reputation: 2358

I think adding flex in appBar with flexDirection column and then making it center, will work

 appBar: {
    height: 200,
    width: `calc(100% - 200px)`,
    marginLeft: 200,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center'
  },

Upvotes: 1

Chandradeepta Laha
Chandradeepta Laha

Reputation: 386

In your toolbar class add this,

alignItems: "flex-start", justifyContent: "center", height: "100%"

Upvotes: 0

Related Questions