WPF项目中如何用NReco PdfGenerator实现HTML标签文本垂直对齐？

我之前在使用NReco PdfGenerator做HTML转PDF时也碰到过类似的垂直对齐需求，它底层依赖的wkhtmltopdf对CSS的支持虽然不算完全前沿，但还是有几种可靠的方案能实现你要的效果，结合你的场景给你分享几个实用方法：

方法1：正确使用Flexbox布局 #

你提到尝试用Flexbox，可能是写法上没注意细节。要让元素垂直对齐，必须给Flex容器设置明确的高度，否则容器高度会自适应内容，垂直对齐就不会生效。示例代码：

<!-- 垂直+水平居中的容器 -->
<div style="width: 300px; height: 200px; border: 1px solid #ddd; 
            display: flex; align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */">
  <p>这是需要垂直对齐的文本内容</p>
</div>

如果只需要垂直对齐（比如左对齐+垂直居中），去掉justify-content: center即可。

方法2：表格布局（兼容性最优） #

如果Flexbox在某些复杂场景下出现兼容问题，表格布局是最稳妥的选择——wkhtmltopdf对表格的垂直对齐支持非常稳定。示例：

<table style="width: 300px; height: 200px; border: 1px solid #ddd;">
  <tr>
    <td style="vertical-align: middle; /* 垂直居中 */
               text-align: left; /* 水平左对齐，可按需改成center/right */">
      这是需要垂直对齐的文本内容
    </td>
  </tr>
</table>

表格的<td>元素自带vertical-align属性，设置为middle就能轻松实现垂直居中，适合各种文本行数的场景。

方法3：Line-height单行文本快速实现 #

如果只是单行文本的垂直对齐，直接设置line-height等于容器高度是最简单高效的方式：

<div style="width: 300px; height: 200px; border: 1px solid #ddd; 
            line-height: 200px; /* 与容器高度一致 */
            text-align: center;">
  单行垂直居中的文本
</div>

⚠️ 注意：这个方法只适用于单行文本，多行文本会导致行间距过大，影响排版。

额外小贴士 #

因为NReco依赖wkhtmltopdf，调试时可以先把HTML保存成文件，用wkhtmltopdf命令行工具直接生成PDF预览效果，这样能更快定位样式问题，比在WPF项目里反复调试高效很多。

内容的提问来源于stack exchange，提问作者Patrick Pirzer