0
225
ViewsHow to center the text in MUI Breadcrumbs
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
·
Juan Pablo Isaza
2 answers
Answer question0
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"
}
}}
>
·
Juan Pablo Isaza
Report
0
Try style={{textAlign:"center" }} in the Card tag.
·
Juan Pablo Isaza
Report
Answer question