gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:54:25 26 4
gpt4 key购买 nike

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

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

最佳答案

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

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

关于HTML + CSS 在 mat-icon 的中心对齐上失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58981033/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com