将分页与底部中心对齐答案

【问题标题】：align pagination to bottom-center将分页与底部中心对齐
【发布时间】：2019-04-09 16:28:38
【问题描述】：

我试图将我的分页放在页面的底部中心。我'，使用角材料mat-paginator。

这是现在的结果：

2：

你可以看到分页器现在在我的 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;
}

衷心感谢

更新：这就是现在的结果：

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

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

【问题讨论】：

尝试在mat-paginator类中设置left:50%
尝试左：50%；翻译X(-50%);它可能会居中
@hindi1991 你也可以使用display: flex; align-item: center
很好垫分页器{显示：弹性；证明内容：中心； } 为我做了诀窍。但是我怎么能一直放在底部呢？即使手风琴打开/关闭？
@MerajKhan 如何将其设置为底部？并且不覆盖任何其他 div？

标签： css angular pagination flexbox angular-material

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

首先，让主机显示为 flex 而不是块

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

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

mat-accordion {
  flex-grow: 1;
}

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

【讨论】：