我正在使用 VS2015 和 C# 开发 WPF 应用程序。
在该应用程序中,我有一个使用 NReco PdfGenerator 将 HTML 转换为 PDF 的功能。
在我的 PDF 中,我得到了一些可以水平和垂直对齐文本的标签。
水平对齐没问题,我用水平居中的“文本对齐:中心”内容使它成为pe。
但是现在我的客户也想在标签中垂直对齐,所以我在 flexbox 的帮助下解决了对齐问题。
每个例子:
"display: flex; justify-content: center; align-items: center;"
这意味着标签的文本将水平和垂直居中。
不幸的是,NReco PdfGenerator 不能使用它。
在 PDF 中,文本位于左侧和顶部。
这里是我使用的 HTML,请不要怀疑位置:绝对。
就像是这样。
<!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>