How to align Angular Material 5 Toolbar title center with Flex

Question

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.

Answer 1

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