How to horizontally align a logo image in the appBar using Material-UI (ReactJS)

I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component.

Here is the code that I attempted:

 <AppBar position="sticky" >
           <Toolbar>
                  <img src={'../logo.svg'} className={classes.logo} alt="logo" />
            </Toolbar>
 </AppBar>

This is how I styled it:

logo: {
        margin: 'auto',
        textAlign: 'center',
        maxWidth: '50%',
        maxHeight: '70%',
    }

It works "sort of". The logo size varies in Chrome and Firefox, while in Internet Explorer it overlaps with the appbar.

I'm seeking a solution to consistently center this logo in the middle of the bar across all browsers.

cssreactjsmaterial-ui

Answer №1

To see a live demonstration, check out the running example available at this link

 <AppBar position="sticky" >
  <Toolbar>
    <div style={classes.logoHorizontallyCenter}>
      <img src={'../logo.svg'} className={classes.logo} alt="logo" />
    </div>
  </Toolbar>
 </AppBar>

Here is the CSS styling:

    var classes = {
  logo: {
    margin: 'auto',
    textAlign: 'center',
    maxWidth: '50%',
    maxHeight: '70%',
  },
  logoHorizontallyCenter: {
    position: 'absolute', 
    left: '50%', 
    top: '50%',
    transform: 'translate(-50%, -50%)'
  }
};

If you need assistance, it would be helpful to provide an example on sandbox so others can easily assist you.

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

Unable to access property 'map' of undefined - having trouble mapping data retrieved from Axios request

When working with React, I have encountered an issue while trying to fetch data from an API I created. The console correctly displays the response, which is a list of user names. However, the mapping process is not functioning as expected. Any insights or ...

javascriptreactjsapiaxiosreact-hooks

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

javascriptjqueryhtmlcss

Error occurs when resizing SVG icon

Having some environmental constraints, I have resized this 16x16 icon to 13.4x16, but it appears blurry. Despite my understanding of SVG and setting the preserveAspectRatio attribute, the resizing does not work as expected. Can anyone point out what I migh ...

htmlcsssvg

Customize the appearance of radio buttons with unique colored outer and inner circles

I am in need of creating a MUI radio button that features a unique outer ring color compared to the selected inner fill color. Although I have reviewed the official documentation, it appears that customization options only allow for changing the color as ...

cssreactjsmaterial-uiradio-button

Verifying property transfer through route checker

I am attempting to pass my properties to a Crime module in my code. Typically, I would do something like this: <Route path="/crime" time={this.state.time} element={<Crime time={this.state.time} totime={this.state.timers.crime} loadtimers={this.loadT ...

reactjsreact-router

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

cssangularjsangularsass

Bootstrap does not display unordered lists (<ul>) or ordered lists (<ol>)

I'm having trouble with my code that should display ordered and unordered lists. Even though I am using Bootstrap, I can't seem to get any list styling - no numbers or bullets are showing up. <ul> <li>test1</li> <li>test2 ...

htmlcsstwitter-bootstrap

Utilizing logic classes in conjunction with styled components

I am seeking a way to utilize this logic in order to assign the appropriate class to an element: <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}> However, as I am employing styled component ...

javascriptreactjsnext.jsstyled-components

Configure environment files for different environments in React using webpack: .env, .env.test, and .env.production

Here is the package.json setup for my React app: "scripts": { "dev": "webpack-dev-server --mode=development", "prod": "webpack --mode=production" } I am looking to set environment variables in .env, .env.t ...

reactjswebpackenvironment-variables

Finding the location of PIE.htc in the Firebug tool

After encountering issues with CSS3 properties not working on IE 7 and IE 8, I decided to include PIE.HTC. Visit this link for more information Upon viewing the page in IE, I realized that the CSS3 properties were not being applied as expected. I attempt ...

javascripthtmlcssfirebugcss3pie

Learn the easy steps to exporting all the pages to CSV format using MUI DataGrid

I'm working with a DataGrid table from Material UI that has over 3000 rows, with a maximum of 50 rows per page. My goal is to export all rows to CSV when I click the export button. Current issue: Only data from the current page is being exported Co ...

reactjsmaterial-uidatagrid

Jest's --findRelatedTests fails to identify associated test cases

Whenever I execute the command jest --bail --findRelatedTests src/components/BannerSet/BannerSet.tsx , an unexpected message is displayed: I couldn't locate any tests and hence exiting with code 1 If you want to exit with code 0 even when there are n ...

reactjstypescriptjestjs

Instructions on deactivating the background when the sidebar is displayed and closing the sidebar by clicking anywhere other than the sidebar

I'm in the process of creating a sidebar for my website. When the sidebar is displayed (by clicking showRight), I want to disable the background content so that the user can't interact with anything outside of the menu. If the user clicks on th ...

javascriptjquerycsssidebar

Having difficulty viewing the options in the dropdown menu

For my current project, I am utilizing react for the frontend and django for the backend. Within my models, I have defined the following Role model: class Role(models.Model): ROLE_CHOICES = ( ('Recruiter', 'Recruiter'), ...

reactjsdjangodjango-modelsdjango-viewsdjango-urls

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

htmlcss

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsseclipse

The 'Element[]' type is lacking certain properties when dealing with react children

In my code, there is a parent component passing down its children to a child component. These children can be either single nodes or arrays of nodes, and the ChildComponent renders them differently based on their type. However, when I try to render the Chi ...

reactjstypescript

What is the process for placing a component on the right side of the sidebar?

Here is the code snippet I am working with: <template> <div class="main"> <sidebar /> <router-view /> </div> </template> The sidebar has a width of 260px. I need to ensure that any comp ...

cssvue.js

The hierarchy of importance in React ViteJs for CSS modules

Working on my React project with ViteJs, I rely on Material UI for the theme and components. To maintain code readability, especially for elements requiring multiple style property lines, I decided to create a separate module.scss file to handle the CSS as ...

reactjswebpackmaterial-uistyled-componentsvite

The self-made <Tab/> element is not functioning properly with the ".Mui-selected" class

I have customized a <Tab/> element and I want to change its selected color using Sandbox demo code export const Tab = styled(MuiTab)({ "&.Mui-selected": { color: "red" } }); However, I've noticed that: 1. Apply ...

javascriptreactjsmaterial-ui