中心ngx分页组件

Question

我想使ngx-pagination组件居中并删除右侧的填充。我尝试过将其包装在容器中，但无法正常工作：

<div class="list">
        <ul>
            <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">{{ item }}</li>
        </ul>
        <div style="text-align: center">
            <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
</div>

Stackblitz：https://stackblitz.com/edit/angular-e1f9hq。

Answer 1

如何解决此问题的方法是在其周围包裹一个div并对其应用一些CSS。 justify-content: center;是这里的诀窍，它将把div的内容移到中间。您可以在MDN上详细了解flex和justify-content。

.pagination {
  display: flex;
  justify-content: center;
}

有关修补程序，请参见this updated StackBlitz。

修改

要解决分页组件的padding-left问题，如此处所示

您需要将padding-left: 0;添加到ngx-pagination类中。您需要做的另一件事是将encapsulation: ViewEncapsulation.None放入组件的声明中（并导入ViewEncapsulation）以使其覆盖样式。参见updated StackBlitz for this fix。

Answer 2

希望这对您有所帮助。

请尝试使用以下CSS。

注意-请在CSS下方的“ style.css”中添加

.ngx-pagination{
  text-align: center;
 }