CODEWITHSUNDEEP
cssreactjsmaterial-ui
user2924127
user2924127

Reputation: 6240

Material Ui (reactjs) - Center a logo image in the appBar

I am using a material ui library for my react project (material-ui.com) and want to add my logo in the center of the appbar component.

I tried with the following code:

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

And the styling is:

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

It "kind of" works. By this I mean in Chrome and Firefox the logo size is different and in IE it overlapping the appbar.

I am looking how to center this logo in the middle of the bar where it is relatively consistent among all browsers.

Upvotes: 2

Views: 6907

Answers (1)

Asad Mehmood
Asad Mehmood

Reputation: 514

I have created running example can be found on link

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

Styling:

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

Please try to provide example on sandbox so that it would be easy for the person to help you out.

Upvotes: 7

Related Questions