如何将分页与屏幕底部中心对齐

Question

我正在尝试将分页放在页面的底部中心，并使用Angular Materialmat-paginator组件。

这就是现在的结果：

1：[！[在此输入图像描述][1]][1]

2：[！[在此输入图像描述][2]][2]

正如你所看到的，mat-paginator现在在我的mat-accordion上方，它不会随着页面的流动而下降，它在左侧而不是中心。

这是我的代码：

HTML：

<mat-spinner *ngIf="isLoading"></mat-spinner>
<mat-accordion multi="true" *ngIf="posts.length > 0 && !isLoading">
<mat-expansion-panel *ngFor="let post of posts">
<mat-expansion-panel-header>
{{ post.title }}
</mat-expansion-panel-header>
<p>{{ post.content }}</p>
<div class="post-image">
<img [src]="post.imagePath" [alt]="post.title">
</div>
<mat-action-row>
<a mat-button color="primary" (click)="onEdit(post.id)">EDIT</a>
<button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
<div class="mat-page">
<mat-paginator [length]="totalPosts" [pageSize]="PostsPerPage" [pageSizeOptions]="pageSizeOptions" (page)="onChangePage($event)"
*ngIf="posts.length > 0 "></mat-paginator>
</div>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0 && !isLoading">No posts added yet!</p>

CSS：

:host {
display: block;
margin-top: 1rem;
}

.info-text {
text-align: center;
}

.post-image {
width: 50%;
}

.post-image img {
width: 100%;
border: 2px solid rgb(202, 202, 202);
}

mat-paginator {
position: absolute;
bottom: 0;
text-align: center;
margin: 0 auto;
}

更新：这就是现在的结果：[！[在此输入图像描述][3]][3]

CSS：

:host {
display: block;
margin-top: 1rem;
}

.info-text {
text-align: center;
}

.post-image {
width: 50%;
}

.post-image img {
width: 100%;
border: 2px solid rgb(202, 202, 202);
}

mat-paginator {
display: flex;
justify-content: center;
}

我现在的问题是，如何在默认情况下将分页设置为底部？[1] ：https://i.stack.imgur.com/21mUj.png[2] ：https://i.stack.imgur.com/kfXH6.png[3] ：https://i.stack.imgur.com/95m05.png

Answer 1

角度HTML模板

<mat-paginator
*ngIf="totalRecords"
[length]="totalRecords"
[pageSize]="pageSize"
[pageIndex]="0"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]="true"
(page)="setPagination($event)">
</mat-paginator>

CSS/SCSS

您所需要做的就是覆盖mat-paginator类，使display: flex;和justify-content值与Angular Material继承的样式融合。

.mat-paginator {
display: flex;
justify-content: center;
} 

Answer 2

要将其设置为底部，您可以尝试以下操作：

首先，使主机显示为flex，而不是阻止

:host {
display: flex;
flex-direction: column;
}

然后，将手风琴设置为始终占用整个可用空间：

mat-accordion {
flex-grow: 1;
}

你可以在这里阅读更多关于弹性间距