表格单元格内的文本未正确对齐答案

【问题标题】：Text inside the table cell improperly aligned表格单元格内的文本未正确对齐
【发布时间】：2013-06-06 02:41:48
【问题描述】：

我正在使用xhtml2pdf（以前的pisa，或者反之亦然？:)）从 django 模板生成 PDF。模板呈现正常，但我从该模板获得的 PDF 以一种非常奇怪的方式损坏：表格单元格中的文本被提升到单元格的顶部，因此大写字母触及单元格的上边框：

在浏览器中是这样的：

我试过了：

应用vertical-align - 看起来它只是被忽略了，至少我没有注意到 pdf 中的任何变化，即使它们在生成的 html 中
应用padding-top - 它会向下移动文本，但也会增加单元格高度。
使用margin-top 将文本包装到span - 效果与padding-top 相同

我认为原因是文本由 xhtml2pdf 在行的最顶部呈现，而浏览器倾向于将其呈现在块中间的某个位置。换句话说，文本块在 pdf 和 html 中占据相同的位置，但是块内的文本被移动了。但这只是我的猜测。

那么，有没有人遇到过同样的问题？难道我做错了什么？任何可能的解决方法？

代码片段：

【问题讨论】：

这里的问题完全相同
@ppetrid 我最终使用了weasyprint。它还有另一个忽略 tr 高度的故障，但这对我来说没什么大不了的。
@JOHN 你有 weasyprint 的示例代码吗？当我使用 weasyprint 时，我得到的结果与您在问题中显示的结果相同。
我的问题是当我在行或单元格上设置高度样式时，垂直对齐会失败。作为一种解决方法，我在同一行中添加了一个额外的单元格，将高度设置为我需要的值，将宽度设置为 0px，然后我可以使用垂直对齐的下一个单元格，它是正确的高度。
@Steve 示例：github.com/e-kolpakov/enforta/blob/master/DocApproval/utilities/…

标签： python django reportlab xhtml2pdf

【解决方案1】：

感谢 J0HN 的示例 - 做得很好。网上还没有很多 weasyprint 的例子。

当我对表格行或单元格应用高度时，我发现垂直对齐失败。我意识到如果我在该行中创建了一个空白单元格，将其分配为 0 宽度和所需的高度，那么该行中的其他单元格我可以应用垂直对齐并且它们会正确呈现。

这是一个示例（创建一个卡片大小的页面，其中包含 1 个文本块，该文本块在页面上水平和垂直居中）：

doc_css = CSS(string='''@page { size: 3.75in 2.75in; margin: .25in }
                    html, body {margin: 0; padding: 0; width: 100%; height: 100%;
                    }''')
doc = HTML(string='''
    <table style="height: 100%; width: 100%;
                  margin: 0;
                  padding: 0;
                  border: 1px solid black">
        <tr>
            <td style="height: 100%; width: 0px;"> /This sets the row height - empty cell
            <td style="vertical-align: middle;
                text-align: center;
                border: 1px solid blue">
                The text to be centered here.
        </tr>
    </table>
''', base_url='/home/Desktop').render(stylesheets=[doc_css])
doc.write_pdf('./weasy_print_sample_pages_list.pdf')

【讨论】：

【解决方案2】：

我添加了一些填充 (padding-top:2px) 来解决问题

【讨论】：