将分页对齐到底部中心

Question

我试图将我的分页放在页面的底部中心。I'，使用角材料垫分页器。

这是现在的结果：

1：

2：

正如你所看到的，分页器现在在我的垫子手风琴上方，它不会随着页面的流动而下降，它在左侧而不是中心。

这是我的代码：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;
}

衷心感谢

更新：这是现在的结果：

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;
}

我现在的问题是如何将分页设置为默认的底部？

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而不是block

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

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

mat-accordion {
  flex-grow: 1;
}

您可以在此处阅读有关弹性间距的更多信息