Tips for aligning text in MUI Breadcrumbs

I am currently utilizing MUI Breadcrumb within my code and I am seeking a solution to center the content within the Breadcrumb. Below is the code snippet that I have attempted:

https://i.stack.imgur.com/7zb1H.png

<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>

To achieve the desired output of centering the content in the Breadcrumb, I am looking for guidance. The expected outcome can be viewed via this link: https://i.stack.imgur.com/PAWYc.png

javascriptcssreactjsmaterial-ui

Answer №1

The alignment of the content is determined by the flex container, not the text-align property.

To correct this issue, you can modify the Breadcrumbs component like so:

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

Answer №2

For a centered alignment in the Card tag, experiment with 

style={{textAlign:"center" }}
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"The Material-UI ListItem component acts as a link, updating the URL but failing to render the expected

Seeking help for the first time on this platform because I am completely perplexed. I'm working on coding a navbar for my school project website using Material-UI's List component within the Appbar component. However, I have encountered two issu ...

javascriptreactjsmaterial-uinavbarurl-routing

Messages and responses from an array within a discord.js bot

Currently, I am attempting to set up my discord.js version 12.0.0 bot to react to specific words using arrays for words and corresponding responses. However, I am encountering the following error message: TypeError: Cannot read property 'split' o ...

javascriptbotsdiscorddiscord.js

Encountering an error in Vue.js where a "cannot read property of undefined" message is displayed when attempting to use v

While attempting to use v-model on an array item's property, I encountered the error message "[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined' when loading the page. This resulted in a ...

javascriptvue.jsvuejs2

A guide on transferring data to an external JavaScript script that is asynchronously loaded

I came across this solution on Stack Overflow here to load JavaScript asynchronously. However, I am wondering how can I pass some data to the external file? This is my current code: <script id="js-widget-o2ba1y" type='text/javascript'> ...

javascriptasynchronous

The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button: <h2 class="sub-header" style="color:#4 ...

javascriptcssbuttonionic-framework

Is NextJS 13 the Key to App Directory On-Demand Revalidation?

I am looking to implement on-demand revalidation with next13 and the app directory. While I have successfully used the app-directory to replace the need for getServerSideProps or getStaticProps, there is one specific page on our site that needs to be rebui ...

javascriptreactjsnext.jsnext.js13stale-while-revalidate

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

javascriptjquerycssjquery-ui

ReactJS universal-cookie package experiencing issue with get() method

I am facing an issue with the interaction between two components stored in separate .js files. import Cookie from 'universal-cookie' class Comp1{ someFunction(){ // Call google Oauth // get userinfo from Oauth response and set the ...

reactjscookiesgettypeerroruniversal

Issues with Curved Corner Touchdown Feature

Having trouble with getting the round css to work properly in the below code It seems to be only applying the background color, but not the border styling The border code is on the same line as the round css: style=" border : 1px solid #D6D6D6; and t ...

htmlcss

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

My current project involves implementing token-based authentication using the MEAN stack. The goal of my application is to display different menu items based on whether a user is logged in or not. When there is no token present, the menu should show option ...

javascriptangularjs

Looking to verify the existence of a div using jQuery once other jQuery functions have executed and created HTML?

Is there a way to verify if a specific element exists within newly added HTML after clicking a button? I attempted this code snippet: $(document).on('click', '#add-html-code', function() { if ($('#something').length ...

javascriptjquery

The onSubmit function in React JavaScript is failing to execute, it is not triggering and no error message is being displayed on the frontend console

As a newcomer to React.js, I recently came across an article detailing how to perform CRUD operations with React Express and MongoDB. However, after implementing the code, I encountered an issue when trying to add a user. Upon clicking the 'Save' ...

reactjsmongodbexpressonsubmit

I could use some assistance with iterating through an array that is passed as a parameter to a function

Compute the product of parameter b and each element in the array. This code snippet currently only returns 25. This is because element a[0], which is "5", is being multiplied by argument b, which is also "5". The desired output should be ...

javascript

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

In my attempt to achieve a specific goal, I have an array of data that I want to incorporate into my HTML document along with a Vue component containing a template. My intention is to utilize list rendering so that the names and images from this array bind ...

javascripthtmlvue.jsvue-componentvuejs3

How to Display Prices in Euros Currency with Angular Filter

Can someone help me figure out how to display a price in euros without any fractions and with a dot every 3 digits? For example, I want the price 12350.30 to be shown as 12.350 €. I attempted to use the currency filter but it only worked for USD. Then ...

javascriptangularjs

What is the best way to invoke a Javascript function within the same file using PHP?

I am facing an issue with my PHP file named "PhpCallJavascript". I am attempting to call the function CreateSVG() from within the PHP code. However, it seems that it is not working. Do I need to incorporate AJAX here? Or perhaps there is another solutio ...

phpjavascriptjquery

Setting ng-click on a custom element directive in Angular 1.x: A guide

Within this code, I have assigned ng-click to a custom element directive with the expectation that clicking the rendered text would trigger an alert saying "Worked from directive!" However, the functionality does not seem to be working as intended. Althou ...

javascriptangularjs

Is it possible to use JavaScript to click on a particular point or element within a canvas?

Is there a way to trigger a click at a specific point on a canvas without direct access to the code that generates it? I've attempted using coordinates, but haven't had any success. Any alternative suggestions would be appreciated. UPDATE: To pr ...

javascriptcanvas

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

htmlcss

Chat lines in Chrome displaying double entries - troubleshooting needed

I developed a chat plugin for my website with a simple HTML structure: <div id="div_chat"> <ul id="ul_chat"> </ul> </div> <div id="div_inputchatline"> <input type="text" id="input_chatline" name="input_chatline" val ...

javascriptjqueryhtmlgoogle-chrome