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

Question

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

目前的结果如下:

1: [![enter image description here][1]][1]

2: [![enter image description here][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;
    }

更新：目前的结果如下图所示： [![enter image description here][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://istack.dev59.com/21mUj.webp [2]: https://istack.dev59.com/kfXH6.webp [3]: https://istack.dev59.com/95m05.webp

- rio

---

尝试在 mat-paginator 类中设置 left:50%。 - Hana Wujira

尝试使用 left: 50%; translateX(-50%); 这些属性，它可能会使其居中或在中间。 - João Deroldo

@hindi1991 你也可以使用 display: flex; align-item: center。 - Mehraj Khan

很好，mat-paginator { display: flex; justify-content: center; } 对我有用。但是，无论手风琴是打开还是关闭，我如何将其始终放在底部？ - rio

@MerajKhan 我要如何将它设置到底部？而不覆盖任何其他的 div？ - rio

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

- Joshua Michael Calafell

Answer 2

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

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

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

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

mat-accordion {
  flex-grow: 1;
}

您可以在这里阅读更多关于弹性间距的内容。

- vasilv