How to target md-toolbar-row element in md-toolbar

问题

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;
}

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/44594726/how-to-target-md-toolbar-row-element-in-md-toolbar