如何在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).

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

如何使内容居中?

尝试以下方法，但无济于事:

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

推荐答案

由于伸缩方向为列，因此应使用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

(可选)您可以更改弯曲方向并使用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屋！