angular-material - 如何在堆叠的 mat-chip-list 中将 mat-chips 居中

Question

这就是芯片现在的堆叠方式：

左边的空间明显小于右边。我怎样才能使芯片居中以使两边的边距均匀？我尝试过使用自定义 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>

Answer 1

您应该删除“ mat-chip-list-stacked ”类，因为它的宽度为 100%，所以您已经看到 mat-chip 居中。如果要添加CSS，请创建自己的类并添加相应的样式

示例：垫片中心