中心 ngx 分页

Question

我有一个 ngx 分页：

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

中心的东西像：

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

不起作用，因为分页的 width 始终是页面的 100% width。

我怎样才能使分页的宽度尽可能小并保持负责？

Answer 1

CSS：

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

如果你想让它在任何地方居中，也可以添加：

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