Centering ngx pagination element in angular

Question

I am using ngx pagination from ngx pagination to implement pagination on my table in angular, I am trying to center the ngx pagination element or make it float right but for some reason, it's not responding I looked into similar questions here and tried those methods but it did not work.

Here is the code I used:

Markup

 <div class="pagination">
            <pagination-controls
              id="data source 2"
              directionLinks="false"
              (pageChange)="p = $event"
            ></pagination-controls>
          </div>

CSS

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

Answer 1

try using text-align: center ↓

<div style="text-align: center; padding-left:0px;">
   <pagination-controls
　　　　　　id="data source 2"
      directionLinks="false"
      (pageChange)="p = $event"
    ></pagination-controls>
</div>