DEV Community

Darryl Wright
Darryl Wright

Posted on

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?

Example

Top comments (6)

Collapse
 
mvhoute profile image
Martin van Houte • Edited

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

display: flex;
justify-content: center;

Collapse
 
hhahaha00261328 profile image
hhahahahaha

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

Collapse
 
eyesno profile image
Darryl Wright

That did it! Thanks.

Collapse
 
sjellen profile image
SJellen

did you try margin: 0 auto;

Collapse
 
dance2die profile image
Sung M. Kim • Edited

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

Collapse
 
eyesno profile image
Darryl Wright

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

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