0

I am trying to put justify-content:center to center the content of the toolbar. On targeting the toolbar I can see the expanded elements and one of them is md-toolbar-row to which giving justify-content:center centers the content(centers only while debugging through developer tools).

Here is the plunker:https://plnkr.co/edit/qh3Kqi9GDXIL4H1HTzFu?p=preview

How do I center the content?

Tried following but none helps:

md-toolbar-row{
justify-content:center;
}

.mat-toolbar-row{
justify-content:center;
}

.mat-toolbar .mat-toolbar-row{
justify-content:center;
}
Aakash Thakur
  • 3,837
  • 10
  • 33
  • 64

2 Answers2

2

As the flex direction is column you should use align-items: center to horizontally center it

md-toolbar {
  align-items: center;
}

Updated Plnkr

Optionally you can change the flex direction and use justify-content: center;

md-toolbar {
  flex-direction: row;
  justify-content: center;
}

Updated Plnkr 2

Asons
  • 84,923
  • 12
  • 110
  • 165
1

If you want to center content for only this toolbar then use the example-spacer class. Make the following change in the class and add it before the <div> tag.

Plnkr demo

css:

.example-spacer {
  flex: .5 1 auto;
}

html:

<md-toolbar color="primary">
  <span class="example-spacer"></span>
  <div>Custom Toolbar</div>
</md-toolbar>
Nehal
  • 13,130
  • 4
  • 43
  • 59