How do I center a logo in this position?

You see the blockbuster logo in this position? I am using a generic tag to display it. I've put it inside my component as the topmost item right above the first . Here's my code:

<Toolbar><img src={logo} style={{alignSelf: 'center'}} height="40px"/></Toolbar>

I also tried this:

<Toolbar style={{alignItems="center"}}><img src={logo} height="40px"/></Toolbar>

Note: The use of seems to have no effect. I just wasn't sure what it ought to be.

As you can see in the photo -- it's definitely not centered. Any suggestions?

Comments

[Sung M. Kim]

Do you have a runnable sample (CodeSandbox or StackBlitz) or code we can check out?

[Darryl Wright]

Hopefully I did this right -- let me know if you can see this:

codesandbox.io/s/nervous-snowflake...

[SJellen]

did you try margin: 0 auto;

[Martin van Houte]

Untested because I'm typing this on mobile, but try this on the toolbar:

display: flex;
justify-content: center;

[hhahahahaha]

You could use display: "flex", justifyContent: "center"

[Darryl Wright]

That did it! Thanks.