我有一个mat-grid-list，其中包含n个mat-card项目。在网格的底部，我想添加我自己的自定义分页器，该分页器位于页面的中心（出于各种原因，我尽可能不使用mat-paginator）。
我尝试仅在<div>元素下面添加一个mat-grid-list元素，并将边距设置为0 auto;（这通常是我将{{1}居中的做法） }），但似乎不起作用（分页器仍然顽固地向左对齐）。
我可以向在所有其他图块之后出现的div添加新的图块，并将其mat-grid-list设置为等于列数。当我这样做时，我得到了一个完美居中的分页器，除了有大量的多余高度（大概是因为它使用的是其他[colspan]项的高度都很大）。
有没有办法：a）使分页器以自己的mat-grid-tile居中对齐，或者b）更改单个div的{{1}}，所以我不最终在分页器周围留下大量可笑的空白？标记如下：
rowHeight，分页器位于mat-grid-tile
mat-grid-list.paginator类的CSS
div（注意：我也曾尝试将<div *ngIf="dataModel" class="container page-content">
<mat-grid-list cols="5">
<mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
<mat-card >
<mat-card-header>
<mat-card-title>{{ page.title }}</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
<mat-card-content>
{{ page.matches }}
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
<div class="paginator">
<button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
<mat-icon aria-label="Previous">navigate_before</mat-icon>
</button>
<ng-container *ngFor="let item of this.getPageArray(); let i = index;">
<button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
</ng-container>
<button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
<mat-icon aria-label="Next">navigate_next</mat-icon>
</button>
</div>
</div>
设置为.paginator {
margin: 0 auto;
padding-top: 20px;
}
，将display设置为inline-block，但都无效。
width mat-grid-tile`
100%答案 0 :(得分：0)
您可以尝试将单独图块的行距设置为例如.5（或更合适的值）。
我不确定它是否可以使用这种语法，但是在我的情况下，我可以在rowHeight上显式设置mat-grid-list并为切片列表中的特定切片使用rows: .5来使用它。