使分页与底部居中对齐

Question

我正试图将分页放在页面的底部中心。我用的是角型材料垫式分页器。

这是现在的结果：

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

我还不能写评论，所以改写一个答案。抱歉。 要将其设置为最低，您可以尝试以下操作：

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

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

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

mat-accordion {
  flex-grow: 1;
}

这应该可以解决问题。

您可以阅读有关弹性间距here

的更多信息

Answer 2

角度HTML模板

为分页器指定一个类名，这样样式就不会渗入所有分页器中（可选）

    $myArray = collect([1,2,3,4,5]);

    $sum = 10;

    $mappedArray = $myArray->map(function($item){
        return $item + $sum;
        //variable $sum is undefined
    });

    dd($mappedArray);

SCSS

所有您需要做的就是覆盖 <mat-paginator class="paginator--centered" *ngIf="totalRecords" [length]="totalRecords" [pageSize]="pageSize" [pageIndex]="0" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true" (page)="setPagination($event)"> </mat-paginator> 类，以使mat-paginator和display: flex;的值融合到 Angular Material的继承样式中。

justify-content

CSS

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