将材料设计按钮置于角表内的中心

Posted 2023-03-06

【中文标题】将材料设计按钮置于角表内的中心

【英文标题】：center a material design button inside an angular table

【发布时间】：2021-06-01 10:41:53

【问题描述】：

我有一个材料设计按钮（下面屏幕截图的第二列）在一个角表内的 mat-cell 内。问题是按钮向右对齐。如何让按钮移动到列的中心？我尝试在行上应用 layout-align="center center" 和 fxLayout-align="center-center" （见下文），然后在 mat-cell 和 ng-Container 标签中放置类似的代码，但没有效果.有任何想法吗？我真的很想将它应用到纽扣电池

谢谢

皮特

<mat-table [dataSource]="dsUmt" matSort>
 ...
<ng-container matColumnDef="Ticket" >
    <mat-header-cell *matHeaderCellDef mat-sort-header>Ticket</mat-header-cell>
    <mat-cell *matCellDef="let umt" >
        <button mat-button color="warn" (click)="MarkTicket(umt)">
        umt.Ticket
    </button>
    </mat-cell>
</ng-container>
...
<mat-row *matRowDef="let row; columns: displayedColumns" layout-align="center center"></mat-row>

【参考方案1】：

在 mat-cell 内部，您可以使用 text-align 来对齐内容。只需将一个类添加到特定单元格并相应地设置它的样式。

这是带有标准角材料表的Stackblitz。如您在本例中所见，符号都向右对齐。