使用wkhtmltopdf转HTML为PDF时表格无法居中的问题排查

嘿，作为前端新手碰到这种样式适配问题太正常啦，别慌！我帮你拆解下可能的原因和对应的解决办法：

• 核心原因：缺少明确的居中对齐CSS样式
  你的HTML只有结构代码，没有给表格或父容器添加居中的样式规则。wkhtmltopdf对CSS的渲染逻辑和浏览器略有差异，默认情况下表格会左对齐，必须明确指定居中样式才行。

  这里给你两种最稳妥的写法，选一种就行：
  方法一：给父容器设置文本居中，表格设为行内块元素

  <style>
  .divGeneral {
    text-align: center; /* 让父容器内的行内/行内块元素居中 */
  }
  #infoTable {
    display: inline-block; /* 把表格变成行内块，这样会跟着父容器的text-align居中 */
  }
  </style>
  

  方法二：直接给表格设置左右自动外边距（更直接）

  <style>
  #infoTable {
    margin: 0 auto; /* 左右外边距自动分配，实现块级元素居中 */
  }
  </style>
  

• 额外注意：避免冲突的样式设置
  如果你之前给表格加了width: 100%，那margin: 0 auto就不会生效了——因为表格已经占满了父容器的宽度，自然没法居中。这种情况下要么去掉width:100%，要么给表格设置一个固定的宽度值（比如width: 300px），再用margin:0 auto。

• 测试小技巧
  先在普通浏览器里打开你的HTML文件，确认表格已经能居中显示了，再用wkhtmltopdf转换。如果浏览器里都不居中，那转PDF肯定也不行，先把浏览器里的样式调对再说～

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