如何在md-toolbar中定位md-toolbar-row元素

Question

我正在尝试将justify-content:center置于工具栏内容的中心位置。在定位工具栏时，我可以看到展开的元素，其中一个是md-toolbar-row，justify-content:center将内容放在中心（仅在通过开发人员工具进行调试时居中）。

以下是plunker：https://plnkr.co/edit/qh3Kqi9GDXIL4H1HTzFu?p=preview

如何将内容集中在一起？

试过以下但没有帮助：

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

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

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

Answer 1

由于弹性方向为列，您应使用align-items: center水平居中

md-toolbar {
  align-items: center;
}

Updated Plnkr

您可以选择更改弯曲方向并使用justify-content: center;

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

Updated Plnkr 2

Answer 2

如果您只想为此工具栏设置内容，请使用example-spacer课程。在课程中进行以下更改，并将其添加到<div>标记之前。

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>