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

When combining li, radio-input, and label, there is no padding at the top

I am facing an issue with the padding at the top of my list items. Here is a link to a working Fiddle: [http://jsfiddle.net/TH3zq/9/][1] http://jsfiddle.net/TH3zq/9/ Can anyone suggest a CSS style solution for this problem? Thanks, John ...

htmlcssinputradio-buttonhtml-lists

Encountering an Invalid JSON error on the Developer console

I'm in the process of building a React application and aiming to establish a connection with my Back4App database. Within the Back4App dashboard, there exists a Person class containing data that needs to be retrieved. It appears that the call is being ...

reactjstypescriptparse-platformback4app

Repeating percentages displayed in a progress bar

I created a responsive progress bar, but the progress values are repeating. I only want the central value to be displayed. Any suggestions on how to fix this issue? DEMO <div id="tab1"> <dx-data-grid class="tableTask" [dataSource]="datas" ...

htmlcssangulartypescript

Utilizing inputRef in conjunction with MUI's useAutocomplete

Is there a way to pass the "inputRef" to Material UI's useAutocomplete? I'm looking to set a custom reference on the input, but the getInputProps() method from useAutocomplete already requires its own reference. I've attempted various appr ...

javascriptreactjsreact-hooksmaterial-ui

What could be causing the issues I am encountering while using IE8?

My website looks great on all browsers except for Internet Explorer. I am currently using Internet Explorer 8 to test it. I've tried using a conditional stylesheet (ie.css) to fix some issues, but there are a few problems that have me stumped. I am op ...

jquerycssinternet-explorerinternet-explorer-8

Hiding content and troubleshooting video playback problems in FancyBox

I'm facing an interesting issue. I've implemented FancyBox lightbox to showcase a "video" tag when users click on the image thumbnail, and it functions well with all varieties of HTML5 video. The challenge arises when testing in browsers older th ...

javascriptjquerycssflash

The art of combining Tailwind CSS classes with precision using clsx

My current challenge involves integrating tailwind classes to a button using the clsx library. One class, 'rounded-none', is applied by default while the other is passed in as a prop. const Button = ({ children, ...props }): JSX.Element => { ...

reactjsnext.jstailwind-css

Encountering a deployment issue while trying to launch a NextJs app on Amplify

I'm encountering issues while trying to deploy my NextJs app on AWS Amplify. Here's a snippet from my package.json: { "name": "bytecho", "version": "0.1.0", "private": true, "scripts ...

reactjsamazon-web-servicesaws-amplifynext.js13

Retrieve data from Firestore using React and log it outside of the asynchronous function

Seeking a way to retrieve data from userRef and use it to initiate another asynchronous call to another document (e.g. bikes) in order to display that bikes doc on the page Currently, the userDetailslog in the Home screen function prints {"_U": ...

javascriptreactjsfirebaseasync-await

Position the icon to the left side of the button using Bootstrap

Need help with centering text on a bootstrap 3 button while aligning the font awesome icon to the left side. <button type="button" class="btn btn-default btn-lg btn-block"> <i class="fa fa-home pull-left"></i> Home </button> Usi ...

htmlcsstwitter-bootstrap-3

Higher order components enhance generic components

I'm facing an issue where I want to assign a generic type to my React component props, but the type information gets lost when I wrap it in a higher order component (material-ui). How can I ensure that the required information is passed along? type P ...

reactjstypescriptmaterial-ui

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

I have successfully implemented a method to change CSS variables using advice found here. However, I am running into an issue where the changes do not persist. After clicking on a navigation link, the styles momentarily switch to the new values but quickly ...

javascriptjqueryhtmlcss

Adding a new tab on button click with React js and Bootstrap 4 - a step-by-step guide

Is there a way to dynamically add a tab when a button is clicked? I've attempted various examples, but none of them have been successful for me. For instance: Initially, there are 2 bootstrap tabs named Tab1 and Tab2. There is also an "Add Tab" butt ...

reactjsbootstrap-4

Encountering an issue when trying to submit a post request: "Received an API resolution without a response for /api/comments, which could lead to delayed requests."

Hey, I recently started diving into Next.js and I'm facing an issue with making a POST request to the API. In my project structure, I have a comments folder nested inside the api folder. Within the comments folder, I've written the following cod ...

javascriptreactjsapinext.js

Choosing colors for Font Awesome icons

Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...

cssfont-awesome

Why doesn't the 'theme' stay consistent in App.js when the hook function is invoked from a different component?

I developed a custom hook to switch MUI theming in my React application. It works perfectly when I change the theme from within App.js, but I encountered an issue when trying to trigger the "toggleDarkMode" function from another component: although the the ...

reactjsmaterial-uireact-hooks

What is the best way to apply the default MUI5 theme and customize the styling of individual components in MUI5?

import { styled } from "@mui/system"; import { CardTravel, Home, People } from "@mui/icons-material"; import { Box, Container, Typography } from "@mui/material"; import React from "react"; const BoxContainer = style ...

reactjsnext.jsmaterial-uitheming

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

javascripthtmlcssreactjs

What is the process for adding extra CSS to a webpage displayed in WebView2?

Currently, I am utilizing the Webview2 control within a winform application. My goal is to enhance the behavior of the loaded page by injecting additional CSS code when a specific URL is being displayed in the browser control. Specifically, I aim to implem ...

javascriptc#csswinformswebview2

What is the best way to update the state of object.item[n] that is nested within an array, which in turn is nested within

A unique data structure is set up in the following way: const library = [ { procedureName:'Build Foundations', id:1, tasks:[ { taskName:'dig at least 1m deep', isCompleted:false, procedureId:1 }, ...

javascriptreactjsecmascript-6