Centre ngx-pagination component

Question

I want to centre the ngx-pagination component and remove the padding on the right-hand side. I've tried using wrapping it in a container and it doesn't work:

<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

How you can solve this is by wrapping a div around it and apply some CSS to it. justify-content: center; does the trick here, it will move the content of its div in the middle of it. You can read more about flex and justify-content at MDN.

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

See this updated StackBlitz for the fix.

Edit

To fix the padding-left issue of the pagination component as seen here

You need to add padding-left: 0; to the ngx-pagination class. One other thing you need to do is to put encapsulation: ViewEncapsulation.None in the component's declaration (and import ViewEncapsulation) to let it override styles. See updated StackBlitz for this fix.