表格单元格中的文字不正确对齐

我使用xhtml2pdf（原来的pisa，或者反之亦然？:)）从django模板生成PDF。模板呈现正常，但是我从该模板中得到的PDF以非常奇怪的方式被破坏：表格单元格中的文本被抬起到单元格的顶部，所以大写字母触及单元格的上边框：表格单元格中的文字不正确对齐

enter image description here

而在浏览器，它看起来像这样：

enter image description here

我已经试过：

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

我想原因是，文本由xhtml2pdf在该行的最顶部渲染，而浏览器往往某处呈现在中间该块。换句话说，文本块在pdf和html中占据了非常相同的位置，但块内的文本被移位。但这只是我的猜测。

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

饮片代码：

来源

2013-06-06 J0HN

完全相同的prolem这里 – ppetrid

@ppetrid我已经结束了使用[weasyprint ]（http://weasyprint.org/）。它有忽视tr高度的另一个小故障，但这对我来说并不重要。 – J0HN

@JOHN你有weasyprint的一些示例代码吗？当我使用weasyprint时，我会得到与问题中显示的结果相同的结果。 – Steve

感谢例如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')

来源

2014-11-15 18:18:23 Steve

表格单元格中的文字不正确对齐

回答

相关问题