Angular material 如何在堆叠的垫子芯片列表中居中垫子芯片

这就是目前芯片的堆叠方式：

左边的空间明显小于右边的空间。如何使芯片居中，使两边的边距均匀？我曾尝试将自定义css类与

text-align:center

和

vertical-align:middle

一起使用，但都不起作用

编辑：以下代码供参考：

<mat-form-field  class = "chiplist" *ngIf="advancedFilterList.length > 0">
<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
    <mat-chip *ngFor="let advancedFilter of advancedFilterList" [selectable]="selectable" 
        [removable]="removable" (removed)="remove(advancedFilter)" (click)="changeUnitSymbolAndPopulateFieldsWithSelectedFilterData(advancedFilter)">
        <mat-icon matChipRemove>cancel</mat-icon>  
        <div [innerHTML]="getFullFilterDescription(advancedFilter)"></div>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>

取消

您应该删除类“堆叠的垫芯片列表”，因为它的宽度为100%，所以您已经可以看到垫芯片居中。如果要添加CSS，请创建自己的类并添加相应的样式

---

示例：

在发布stackblitz示例之前，您是否检查了该示例？芯片水平显示，而我需要它们垂直堆叠。此外，删除mat芯片列表堆叠类Doessent更改了任何内容，但它仍然没有完全保存。下一次，附加一个stackblitz。