gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:50:18 26 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

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

关于html - 如何为 NReco PdfGenerator 垂直对齐 HTML 标签中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49980106/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com