HTML + CSS在mat-icon的中心对齐上失败

Question

问题：我生成的列未居中对齐我的Mat-icon。我缺少什么？

关于ngFor我的数据表列是动态生成的，但是没有人正确对齐。

在我的DIV中有一个Mat-icon（默认情况下）适用于左对齐。

HTML代码：

<div *ngFor="let col of colunas">
        <ngx-datatable-column [name]="col.ds_titulo_coluna" *ngIf="col.fl_exibe_coluna">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <div *ngIf="row[col.id] === 'pend'">
                    <div class="v-align-middle">
                        <mat-icon class="warning">info</mat-icon>
                    </div>
                </div>

                <div *ngIf="row[col.id] === 'rep'">
                    <div class="v-align-middle">
                        <mat-icon class="red-fg">report_off</mat-icon>
                    </div>
                </div>

                <div *ngIf="row[col.id] === 'ok'">
                    <div class="v-align-middle">
                        <mat-icon class="green-fg">check_circle</mat-icon>
                    </div>
                </div>

                <div *ngIf="row[col.id] === 'ag'">
                    <div class="v-align-middle">
                        <mat-icon class="orange-fg">schedule</mat-icon>
                    </div>
                </div>
            </ng-template>
        </ngx-datatable-column>
    </div>

SCSS代码：

.ngx-datatable-column.text-center
{
   display: flex !important;
   align-items: center !important;
   margin-left: 10px;
}

.warning{
   color: #dec71b;
}

.v-align-middle { 
   vertical-align: middle;
}

Result of code:

Answer 1

如下替换.v-align-middle CSS规则。希望这对您有用。

.v-align-middle { 
   display: flex;
   justify-content: center;
   align-items: center;
}