выравнивание нумерации страниц по центру

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

угловой шаблон HTML

Дайте paginator имя класса, чтобы стили не распространялись на все paginators (необязательно)

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

SCSS

Все, что вам нужно сделать, это переопределить класс mat-paginator, чтобы иметь значения display: flex; и justify-content, которые смешиваются в унаследованные стили от Угловой материал .

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

CSS

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

Answer 2

Я пока не могу писать комментарии, поэтому вместо этого напишу ответ. Сожалею. Чтобы установить его в нижней части, вы можете попробовать следующее:

Сначала сделайте так, чтобы хост отображался как flex вместо блока

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

Затем установите гармошку так, чтобы она занимала все доступное пространство:

mat-accordion {
  flex-grow: 1;
}

Это должно сработать.

Вы можете узнать больше о расстояниях изгиба здесь