css - 如何在 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

由于 flex 方向是列，你应该使用align-items: center 水平居中

md-toolbar {
  align-items: center;
}

Updated Plnkr

---

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

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

Updated Plnkr 2