How to align Angular Material 5 Toolbar title center with Flex
Assuming the mat-toolbar
has display: flex
and row
direction (which is normally the default), set justify-content: center
on its parent, the mat-toolbar
, or use auto margin* on the span
, giving it margin: 0 auto
.
In both cases one also need to remove flex: 1 1 auto
, as that will make the span
fill its parent, since its flex-grow
has 1
(the first value in the shorthand flex
)
.title-center {
margin: 0 auto;
}
Or, if to keep the existing CSS, also add text-align: center
to it, as one normally does when e.g. center an inline element like a span
in a block element like a div
.title-center {
flex: 1 1 auto;
text-align: center;
}
* With Flexbox, auto margins got an update, https://www.w3.org/TR/css-flexbox-1/#auto-margins
![Alisson Reinaldo Silva](https://i.stack.imgur.com/Yrl3j.jpg?s=256&g=1)
Alisson Reinaldo Silva
I love watching game speedruns, anime reactions, drinking coffee. I enjoy travelling with my wife and friends. I often host parties and barbecues at home.
Updated on April 28, 2020Comments
-
Alisson Reinaldo Silva about 4 years
I'm using Angular Material for my Angular 5 project. I'd like to align the toolbar title to center.
In their docs, they mention:
The toolbar does not perform any positioning of its content. This gives the user full power to position the content as it suits their application.
A common pattern is to position a title on the left with some actions on the right. This can be easily accomplished with display: flex:
This is what I tried:
<mat-toolbar color="primary"> <span class="title-center">TITLE</span> </mat-toolbar> .title-center { flex: 1 1 auto; }
...but the title is still in the left.
I tried reading here about flex, but couldn't figure out what to do.