CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Dan
Dan

Reputation: 25

Center a material-ui React component in a footer element

I am trying to center a material-ui Simple Breadcrumbs component within a footer instead of it being left aligned. I'm new to this and I feel that this should be pretty straightforward but I can't figure it out. I've tried setting the text-alignment property to center and that hasn't worked.

function Footer() {

  return (
    <footer>
      <SimpleBreadCrumbs />
    </footer>
  );
}

export default Footer;

export default function SimpleBreadcrumbs() {
  let year = new Date().getFullYear();

  return (
    <Breadcrumbs className="breadcrumbs" aria-label="breadcrumb">
      <Link color="inherit" href="/" onClick={handleClick}>
        Material-UI
      </Link>
      <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
        Core
      </Link>
      <Typography color="textPrimary">Copyright © {year}</Typography>
    </Breadcrumbs>
  );
}

Upvotes: 1

Views: 1165

Answers (1)

isAif
isAif

Reputation: 2354

You can use flex to center the SimpleBreadCrumbs component.

function Footer() {

  const style = {
    display: 'flex',
    justifyContent: 'center'
  };

  return (
    <footer style={style}>
      <SimpleBreadCrumbs />
    </footer>
  );
}

export default Footer;

Upvotes: 1

Related Questions