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，请不要怀疑位置：绝对。

就像是。

<!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标签垂直对齐文本

1 个答案: