在页脚元素中居中 material-ui React 组件

Question

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

Answer 1

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;