如何在pdfmake表格中实现图标的垂直居中对齐？

问题现状 #

你当前的代码已经实现了图标的水平居中，但未实现垂直对齐，效果如下：

解决方案 #

方案1：利用表格单元格的垂直对齐属性

表格单元格默认vertical-align值为baseline，改为middle即可让内容垂直居中。

• 方式1：行内样式直接添加
  修改每个包含图标的td标签，追加vertical-align: middle：

<td class="rating-td" *ngIf="res.rating.rating == 5" style="width: 10%;text-align: center;vertical-align: middle;">
  <img src="data:image/png;base64,iVBORw0KGgoAAAAN">
</td>

• 方式2：CSS类统一设置（推荐）
  在全局或组件样式中添加：

.rating-td {
  vertical-align: middle;
}

所有带rating-td类的单元格都会自动应用垂直居中，无需逐个修改行内样式。

方案2：Flex布局实现双方向居中

如果偏好Flex布局，给rating-td设置以下样式：

.rating-td {
  width: 10%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

这种方式无需额外写text-align: center，Flex会同时处理水平、垂直方向的居中。

代码优化建议 #

你当前代码中每个评分都单独写td和*ngIf，冗余度高。可以用Angular的ngSwitch简化结构：

<div id="pdfTable" #pdfTable style="display: none;">
  <table class="table table-borderless mb-0" style="font-size:14px;">
    <thead>
      <tr *ngFor='let res of resRating'>
        <td><b>{{res.skill.skillName}}:</b>{{res.skill.skillDescription}}</td>
        <td class="rating-td" [ngSwitch]="res.rating.rating" style="width: 10%;vertical-align: middle;text-align:center;">
          <img *ngSwitchCase="5" src="data:image/png;base64,iVBORw0KGgoAAAAN">
          <img *ngSwitchCase="4" src="data:image/png;base64,iVBORw0KGgoAAAAN">
          <img *ngSwitchCase="3" src="data:image/png;base64,iVBORw0KGgoAAAAN">
          <img *ngSwitchCase="2" src="data:image/png;base64,iVBORw0KGgoAAAAN">
          <img *ngSwitchCase="1" src="data:image/png;base64,iVBORw0KGgoAAAAN">
        </td>
      </tr>
    </thead>
  </table>
</div>

只用一个td就能根据评分显示对应图标，后期维护更便捷。

内容的提问来源于stack exchange，提问作者rose pauline