css - Material Spinner 垂直对齐
问题描述
我在垫表列中使用角材料微调器。可以在顶部看到微调器。我想将微调器与其他图标垂直对齐
我目前得到的是:
<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;
}
推荐阅读
- html - 通过 Jenkins 发送 HTML 报告和 Cucumber 报告到电子邮件
- azure-devops - Azure DevOps - 在某个阶段发布失败时自动重新部署触发器
- python - codejam round E 2019 中 #1 的运行时错误(已跳过测试集)
- templates - 从另一个模型翻译选择字段 - 模板网站 Odoo 11
- iteration - 如何有效且不平凡地实现迭代 Karatsuba?
- json - 如何使用powershell中的if条件在json文件中写入一个值?
- android - 如果满足条件则插入记录 房间数据库
- java - 我在 java 中使用 stringbuilder csv 创建 CSV 文件时遇到问题
- spring-mvc - Thymeleaf 访问嵌套对象
- sql-server - 使用 select 和 union 将值插入不同的数据库