Center ngx-pagination

Question

I have an ngx-pagination :

<pagination-controls
                  id="pagination"
                  (pageChange)="page = $event"
                  (pageBoundsCorrection)="page = $event"
                  [maxSize]="9"
                  [directionLinks]="true"
                  [autoHide]="true"
                  [responsive]="true"
                  previousLabel="Previous"
                  nextLabel="Next"
                  screenReaderPaginationLabel="Pagination"
                  screenReaderPageLabel="page"
                  screenReaderCurrentLabel="You're on page">
</pagination-controls>

Things with center like :

<div class="d-flex justify-content-center">
  <my-pagination></my-pagination>
</div>

are not working, cause the width of the pagination is alwayws 100% width of the page.

How can i make width of the pagination as small as possible and keep it responsible?

Answer 1

CSS:

.mat-paginator-container {
  width: fit-content !important;
}

And if you want to center it everywhere add this too:

.mat-paginator-outer-container {
  justify-content: center !important;
}