Estoy usando MUI Breadcrumb en mi Código. Quiero centrar el Contenido en Breadcrumb. Intento este código
<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>Quiero centrar el contenido en Breadcrumb. Necesito el resultado esperado
El contenido está alineado a la izquierda por el contenedor flexible, no por text-align .
Debería poder solucionarlo agregando esto al componente Breadcrumbs:
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb" sx={{ "& ol": { justifyContent: "center", margin: "auto" } }} >Prueba style={{textAlign:"center" }} en la etiqueta de la tarjeta.