How can I align pagination to bottom-center of screen?

Question

I'm trying to put my pagination in the bottom-center of the page and using Angular Material mat-paginator component.

This is the result right now:

1:

2:

As you can see the mat-paginator now is going above my mat-accordion and it's not going down with the flow of the page, and it's on the left side instead of the center.

This is my code:

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

Update: That is the result right now:

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

My question now is how can I set the pagination to be in the bottom by default?

Tabbi

try setting left:50% in mat-paginator class – Selffertilization

try with left: 50%; translateX(-50%); it will probably center ir middle – Cocteau

@hindi1991 You can also use display: flex; align-item: center – Carmancarmarthen

well mat-paginator { display: flex; justify-content: center; } did the trick for me. but still how can I put in in the bottom all the time? even if the accordion is open/close? – Tabbi

@MerajKhan how do I set it to bottom? and not override any other div? – Tabbi

Answer 1

Angular HTML Template

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

CSS/SCSS

All you need to do is override the mat-paginator class to have display: flex; and justify-content values that blend into the inherited styles from Angular Material.

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

Poltroonery

Answer 2

To set it to bottom you can try the following:

First, make the host to display as flex instead of block

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

Then, set the accordion to take the whole available space all the time:

mat-accordion {
  flex-grow: 1;
}

You can read more about flex spacings here

Annalee

Answer 3

In angular 18 I had to drop the '.' since it recognized mat-paginator as a class and not from the module.

CSS/SCSS

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

Shore