CODEWITHSUNDEEP
cssflexboxangular-material2
Aakash Thakur
Aakash Thakur

Reputation: 3905

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

Upvotes: 0

Views: 745

Answers (2)

Asons
Asons

Reputation: 87303

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

Upvotes: 2

Nehal
Nehal

Reputation: 13317

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>

Upvotes: 1

Related Questions