如何在Angular版Antd中将nz-table分页位置调整为居中？

NG-ZORRO（Antd for Angular）的样式完全可以覆盖，你当前不生效是两个问题共同导致的：

1. Angular默认的组件样式隔离机制阻止了你的样式作用到nz-table内部的分页节点
2. 你使用的选择器不对，没有命中实际控制分页对齐的DOM节点

方案1：覆盖内置分页样式（最简便） #

你可以二选一实现：

• 组件内样式修改：在你的组件less文件里改用如下写法，用::ng-deep穿透样式隔离，同时命中正确的类名：

// 可在前面加你的组件专属类名，避免样式污染全局
::ng-deep nz-table .ant-table-pagination.ant-pagination {
  justify-content: center;
}

• 全局样式修改：把上面的代码去掉::ng-deep，直接写到项目全局的styles.less文件里即可生效。

方案2：自定义分页布局（更可控） #

如果你不想覆盖框架内置样式，可以关闭nz-table的内置分页，自己单独加分页组件控制位置：

1. 把nz-table的nz-show-pagination属性改为false，关闭内置分页
2. 在nz-table外新增分页节点，自定义布局：

<nz-table
  #membersTable
  nzSize="default"
  nzTableLayout="fixed"
  [nzData]="members"
  [nzShowPagination]="false"
>
  <!-- 表格原有内容不变 -->
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone number</th>
      <th>Accounts</th>
      <th nzWidth="70px"></th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let member of membersTable.data">
      <tr class="org-admin-member-row" [member]="member"></tr>
    </ng-container>
  </tbody>
</nz-table>
<!-- 自定义分页，直接控制居中 -->
<div style="display: flex; justify-content: center; margin: 16px 0;">
  <nz-pagination 
    nzPaginationType="default"
    [nzTotal]="totalCount" 
    [(nzPageIndex)]="pageIndex"
    [(nzPageSize)]="pageSize"
  >
  </nz-pagination>
</div>

你只需要同步把分页的页码、页长、总数和你的表格数据逻辑绑定即可。

内容的提问来源于stack exchange，提问作者Roy Lee