如何在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;
}
(可选)您可以更改弯曲方向并使用justify-content: center;
Optionally you can change the flex direction and use justify-content: center;
md-toolbar {
flex-direction: row;
justify-content: center;
}
这篇关于如何在md-toolbar中定位md-toolbar-row元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!