How to align the logo at center in angular material?

user_13270726 0
Viewed 974

I am making an angular application with toolbar at top.

Placed a left menu button, logo and a button and a text at last.

Problem:

Here the logo at center is not center to the toolbar but it is center to the first menu button and the other button after logo text.

Requirement:

The logo at the center needs to be center for the entire toolbar no matter what is placed next to it.

Working Stackblitz:

https://stackblitz.com/edit/material-flex-toolbar-21bjwf

flexbox angular-material angular css html
1 Answers

Just make toolbar position: relative and position the logo with

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

This way, logo will be in the middle, no matter what. Of course, don't forget to stick the actions always to the right (either add margin-left: auto to actions or add justify-content: space-between for whole toolbar)

user_16371490
Related