如何为NReco PdfGenerator对齐HTML标签垂直的文本
[英]How to align text in HTML label vertical for NReco PdfGenerator
问题描述
I'm working on a WPF application with VS2015 and C#. 
我正在使用VS2015和C＃开发WPF应用程序。
In that application i have a function which converts a HTML to a PDF with NReco PdfGenerator. 在该应用程序中，我具有使用NReco PdfGenerator将HTML转换为PDF的功能。
In my PDF i got some labels which text can be aligned horizontally and vertically. 在我的PDF中，我得到了一些标签，这些标签的文本可以水平和垂直对齐。
Horizontal alignment was not problem, i made it pe with "text-align: center" content which is horizontally centered. 水平对齐是没有问题的，我使用水平居中的“ text-align：center”内容进行了调整。
But now my customer wanted vertical alignment in the labels too, so i solved the alignment by the help of flexbox. 但是现在我的客户也希望在标签中进行垂直对齐，因此我借助flexbox解决了对齐问题。
Per example: 例如：
"display: flex; justify-content: center; align-items: center;"
This means the text of the label will be centered horizontally and vertically. 这意味着标签文本将水平和垂直居中。
Unfortunately the NReco PdfGenerator don't work with that. 不幸的是，NReco PdfGenerator无法与此配合使用。
In the PDF the text is positioned left and top. 在PDF中，文本位于左侧和顶部。
Here the HTML i'm using and please don't wonder about position:absolute. 这是我正在使用的HTML，请不要怀疑position：absolute。
It's like it is. 就是这样。
<!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 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 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 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>
1 个解决方案
解决方案1
0 已采纳 2018-04-23 11:45:18
I think the problem may be that flex isn't supported in PDF yet? 我认为问题可能是PDF尚不支持flex吗？ There are great ways to vertical align the text though. 有很多方法可以使文本垂直对齐。 https://css-tricks.com/centering-css-complete-guide/ covers all of them i think :) https://css-tricks.com/centering-css-complete-guide/涵盖了所有我认为的内容：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.