[英]Alignment in Expansion Panel of Angular Material
I want to align icon to the left side of the expansion panel and align the title to the center.我想将图标对齐到扩展面板的左侧并将标题对齐到中心。 I'm having a problem with the CSS, as text-align doesn't seem to work very well.
我在使用 CSS 时遇到问题,因为文本对齐似乎效果不佳。 I welcome any suggestions, thanks.
我欢迎任何建议,谢谢。
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title >
<app-icon-button></app-icon-button>
{{title}}
</mat-panel-title>
<!-- <mat-panel-description></mat-panel-description> -->
</mat-expansion-panel-header>
<p>hello</p>
</mat-expansion-panel>
</mat-accordion>
You can do something like this:你可以这样做:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="panelTitle">
<app-icon-button></app-icon-button>
{{title}}
</mat-panel-title>
<!-- <mat-panel-description></mat-panel-description> -->
</mat-expansion-panel-header>
<p>hello</p>
</mat-expansion-panel>
</mat-accordion>
And in the.scss file:在 .scss 文件中:
.panelTitle{
display:flex;
flex-direction:row;
align-items:center;
}
If the style still not applyed add encapsualtion:viewEncapsulation.None
to the component decorator.如果样式仍未应用,请将
encapsualtion:viewEncapsulation.None
添加到组件装饰器。
Hope this will work for you希望这对你有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.