我在 mat table 列中使用 Angular Material 微调器。在顶部可以看到微调器。我想将微调器垂直对齐到与其他图标相同的水平
我目前得到的是:
<ng-container matColumnDef="actions">
<th at-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let element">
<div class="spinner-wrapper">
<mat-spinner [diameter]="30" mode="indeterminate">
</mat-spinner>
</div>
<button class="btn btn-default">
<span class="neo-icon neo-icon-edit"></span>
</button>
<button class="btn btn-default">
<span class="neo-icon neo-icon-trash"></span>
</button>
</td>
</ng-container>
.spinner-wrapper {
display: inline-block;
}
.mat-spinner {
margin: 0 auto;
}
如何将微调器与其他图标对齐?
最佳答案
你必须使用另一个包装器,并将显示设置为 flex 并使用 align-items: center
:
<td mat-cell *matCellDef="let element">
<div class="button-wrapper">
<mat-spinner [diameter]="30" mode="indeterminate"></mat-spinner>
<button class="btn btn-default">
<span class="neo-icon neo-icon-edit"></span>
</button>
<button class="btn btn-default">
<span class="neo-icon neo-icon-trash"></span>
</button>
</div>
</td>
CSS:
.button-wrapper {
display: flex;
align-items: center;
}
关于css - Material Spinner 垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58621064/