How to center the text in MUI Breadcrumbs-CodePudding

I am using MUI Breadcrumb in my Code. I want to center the Content in Breadcrumb. I Try this code

<BreadcrumbStyle style={{marginTop:30}}>
  <Card elevation={3} style={{padding:10}}>
      <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb" >
        <Link underline="hover" color="inherit" href="/" sx={{ display: "flex", alignItems: "center" }} ><HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" /> Home  </Link>
        <Typography  >Projects </Typography>
        <Typography style={{color:"blue", fontWeight:"bold",}} noWrap >React JS Web Application</Typography>
      </Breadcrumbs>
     </Card>
</BreadcrumbStyle>

I want to center the content in Breadcrumb. I need the expected output

CodePudding user response：

The content is left-aligned by the flex container, not by text-align.

You should be able to fix it by adding this to the Breadcrumbs component:

<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
  sx={{
    "& ol": {
      justifyContent: "center",
      margin: "auto"
    }
  }}
>

CodePudding user response：

Try style={{textAlign:"center" }} in the Card tag.