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

Question

问题:我生成的列没有居中对齐我的垫子图标。 我错过了什么？

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

在我的 DIV 中有一个垫子图标(默认情况下)适用于左对齐。

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