我想使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。
答案 0 :(得分: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。
答案 1 :(得分:0)
希望这对您有所帮助。
请尝试使用以下CSS。
注意-请在CSS下方的“ style.css”中添加
.ngx-pagination{
text-align: center;
}