Angular材質擴展板Alignment

Question

我想將圖標對齊到擴展面板的左側並將標題對齊到中心。 我在使用 CSS 時遇到問題，因為文本對齊似乎效果不佳。 我歡迎任何建議，謝謝。

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

Answer 1

你可以這樣做：

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

在 .scss 文件中：

.panelTitle{
    display:flex;
    flex-direction:row;
    align-items:center;
    }

如果樣式仍未應用，請將encapsualtion:viewEncapsulation.None添加到組件裝飾器。

希望這對你有用