时间戳

首页 > 解决方案 > 使用CSS将跨度中的文本与Angular Material图标的底部对齐？

html - 使用CSS将跨度中的文本与Angular Material图标的底部对齐？

问题描述

我有以下代码。我想让跨度中的文本与星星的底部对齐。

<ng-container *ngIf="starCount">
    <span>Not Relevant</span>
    <button
        mat-icon-button
        color="primary"
        *ngFor="let ratingId of ratingArr; index as i"
        [id]="'star_' + i"
        (click)="onClick(i + 1)">
        <mat-icon>{{ rating > i  ? 'star' : 'star_border' }}</mat-icon>
    </button>
    <span>Very Relevant</span>
</ng-container>

在 Chrome 检查器中尝试了各种方法，但没有取得任何有意义的进展。

标签： htmlcssangular-material

解决方案

你可以使用类似的东西：

<div *ngIf="starCount" style="display: flex; align-items: center">
    <span>Not Relevant</span>
    <button
        mat-icon-button
        color="primary"
        *ngFor="let ratingId of ratingArr; index as i"
        [id]="'star_' + i"
        (click)="onClick(i + 1)">
        <mat-icon>{{ rating > i  ? 'star' : 'star_border' }}</mat-icon>
    </button>
    <span>Very Relevant</span>
</div>

推荐阅读