0

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

4

1 回答 1

0

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

于 2018-04-23T11:45:18.810 回答