如何在 md-toolbar 中定位 md-toolbar-row 元素 [英] How to target md-toolbar-row element in md-toolbar

问题描述

我试图将 justify-content:center 置于工具栏内容的中心.在定位工具栏时，我可以看到扩展的元素，其中之一是 md-toolbar-row ，其中给 justify-content:center 中心内容(仅在调试时中心通过开发者工具).

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).

这是 plunker:https://plnkr.co/edit/qh3Kqi9GDXIL4H1HTzFu?p=预览

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

如何将内容居中?

尝试了以下但没有帮助:

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

推荐答案

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

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

md-toolbar {
  align-items: center;
}

更新的 Plnkr

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

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

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

更新了 Plnkr 2

这篇关于如何在 md-toolbar 中定位 md-toolbar-row 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！