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. 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:
.panelTitle{
display:flex;
flex-direction:row;
align-items:center;
}
If the style still not applyed add encapsualtion:viewEncapsulation.None
to the component decorator.
Hope this will work for you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.