如何为 NReco PdfGenerator 垂直对齐 HTML 标签中的文本

Question

我正在使用 VS2015 和 C# 开发 WPF 应用程序。

在该应用程序中，我有一个函数可以使用 NReco PdfGenerator 将 HTML 转换为 PDF。

在我的 PDF 中，我得到了一些文本可以水平和垂直对齐的标签。

水平对齐没问题，我做到了 p.e。 "text-align: center" 水平居中的内容。

但现在我的客户也希望标签垂直对齐，所以我借助 flexbox 解决了对齐问题。

例如：

"display: flex; justify-content: center; align-items: center;"

这意味着标签的文本将水平和垂直居中。

不幸的是，NReco PdfGenerator 不支持它。

在 PDF 中，文本位于左侧和顶部。

这是我正在使用的HTML，请不要怀疑position:absolute。

就是这样。

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
 <style>
  body { font-size: 12pt; font-family: Arial, Helvetica, sans-serif; }
  input, textarea, select, div { position: absolute;  z-index: 80; padding: 0; margin: 0; border: 0; }
  label { position: absolute; }
  input, textarea, select { background-color: lightgrey; }
  .field_function_1, .field_function_2 { border: 0pt dashed green; width: 100%; }
  .field_function_3, .field_function_4, .field_function_5, .field_function_6 { border: 1pt dashed grey; width: 100%; }
 </style>
</head>
<body>
 <div class='protocolCointainer' style='border: 0pt solid pink; page-break-after: always; position: relative;'>
  <div id="content" style="border: 1pt solid red; height: 255mm; width: 181mm; position: relative; top: 17mm;">
   <div style="top:10pt; height:270pt; page-break-inside:avoid;" class="field_function_1">
    <label id="39048" name="Alignment_Top" style="top:10pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; border-left:thin solid; border-top:thin solid; border-right:thin solid; border-bottom:thin solid; height:40pt; width:140pt; overflow:hidden; font-weight: bold;" iniLang ="true" textKey="InputField_Vertical_Test_RTB_1">Alignment&nbsp;Top</label>
    <label id="39049" name="Alignment_Center" style="top:60pt; left:10pt;display: flex; justify-content: center; flex-direction: row; align-items: center; border-left:thin solid; border-top:thin solid; border-right:thin solid; border-bottom:thin solid; height:40pt; width:140pt; overflow:hidden; font-weight: bold;" iniLang ="true" textKey="InputField_Vertical_Test_RTB_2">Alignment&nbsp;Center</label>
    <label id="39050" name="Alignment_Bottom" style="top:110pt; left:10pt;display: flex; justify-content: flex-end; align-items: flex-end; border-left:thin solid; border-top:thin solid; border-right:thin solid; border-bottom:thin solid; height:40pt; width:140pt; overflow:hidden; font-weight: bold;" iniLang ="true" textKey="InputField_Vertical_Test_RTB_3">Alignment&nbsp;Bottom</label>
    <input id="39052" name="NUM_1" type="text" maxlength="7" placeholder="___,__" title="Please use format ###,##" pattern="^[\+|-]?\d{1,3}([\.|,]\d{1,2})?$" style="top:160pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; height:20pt; width:100pt;" />
    <textarea id="39053" name="TXB_1" style="top:190pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; height:40pt; width:140pt; resize:none;"></textarea>
    <select id="39054" name="DDL_1" style="top:240pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; height:20pt; width:100pt;"></select>
   </div>
  </div>
 </div>
</body>
</html>

Answer 1

我认为问题可能是 PDF 还不支持 flex？不过，有很多方法可以垂直对齐文本。 https://css-tricks.com/centering-css-complete-guide/涵盖了我认为的所有内容:)

如何为 NReco PdfGenerator 垂直对齐 HTML 标签中的文本

How to align text in HTML label vertical for NReco PdfGenerator

html

css

nreco