使用SelectPdf HtmlToPdf生成横向PDF证书无法居中求助

尝试用HTML生成PDF证书，浏览器显示正常，但生成的PDF内容右对齐且左侧留白，无法实现内容居中或占满100%宽度。背景图片尺寸为3508x2480。

原HTML代码 #

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
    }

    h1 {
        text-align: center;
        font-size: xx-large;
        margin-bottom: 20px;
    }

    p {
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }

    .background {
        background-image: url(https://localhost:44448/static/diploma-background.jpg);
        width: 1024px;
        height: 768px;
        margin: 0;
        padding: 0;
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }

    .diploma {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0 auto;
        padding: 30px;
    }
</style>
<html>
<body>
    <div class="background">
        <div class="diploma">
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</body>
</html>

原C#代码 #

SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
// set converter options
converter.Options.PdfPageSize = PdfPageSize.A4;
converter.Options.PdfPageOrientation = PdfPageOrientation.Landscape;

converter.Options.MarginLeft = 0;
converter.Options.MarginRight = 0;
converter.Options.MarginTop = 0;
converter.Options.MarginBottom = 0;
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;

converter.Options.WebPageWidth = 1024;
converter.Options.WebPageHeight = 768;
converter.Options.WebPageFixedSize = true;
converter.Options.AutoFitHeight = HtmlToPdfPageFitMode.AutoFit;
converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.AutoFit;
// set css @media print
converter.Options.CssMediaType = HtmlToPdfCssMediaType.Print;
converter.Options.ViewerPreferences.CenterWindow = true;
SelectPdf.PdfDocument doc = converter.ConvertHtmlString(diplomahtml);

效果对比 #

• 生成的PDF效果：
• Chrome中HTML显示效果：

解决思路与修改方案 #

1. 优化HTML布局与样式 #

替换绝对定位为flex布局，确保内容在容器中可靠居中，同时适配页面尺寸：

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    h1 {
        text-align: center;
        font-size: xx-large;
        margin-bottom: 20px;
    }

    p {
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .background {
        background-image: url(https://localhost:44448/static/diploma-background.jpg);
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        background-position: center center;
        background-size: cover; /* 替换为cover避免拉伸，同时覆盖容器 */
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .diploma {
        padding: 30px;
        width: 90%; /* 限制内容宽度，避免超出背景 */
    }
</style>
<html>
<body>
    <div class="background">
        <div class="diploma">
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</body>
</html>

2. 修正SelectPdf配置 #

移除固定页面尺寸设置，让转换器适配PDF页面，同时对齐浏览器渲染逻辑：

SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
// set converter options
converter.Options.PdfPageSize = PdfPageSize.A4;
converter.Options.PdfPageOrientation = PdfPageOrientation.Landscape;

converter.Options.MarginLeft = 0;
converter.Options.MarginRight = 0;
converter.Options.MarginTop = 0;
converter.Options.MarginBottom = 0;
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;

// 移除固定页面尺寸设置，让转换器自动适配
// converter.Options.WebPageWidth = 1024;
// converter.Options.WebPageHeight = 768;
// converter.Options.WebPageFixedSize = true;

// 设置为FitToPage强制内容适配页面宽度和高度
converter.Options.AutoFitHeight = HtmlToPdfPageFitMode.FitToPage;
converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.FitToPage;

// 改为Screen媒体类型，和浏览器显示一致
converter.Options.CssMediaType = HtmlToPdfCssMediaType.Screen;
converter.Options.ViewerPreferences.CenterWindow = true;

SelectPdf.PdfDocument doc = converter.ConvertHtmlString(diplomahtml);

3. 额外注意事项 #

• 确保背景图片路径在转换时可访问（localhost路径在服务器环境下可能无法读取，建议改用绝对路径或嵌入图片）
• 如果仍有偏移，可尝试设置converter.Options.WebPageZoom = 1.0强制1:1缩放
• 测试不同的CssMediaType值，SelectPdf对Screen和Print的渲染逻辑差异较大

内容的提问来源于stack exchange，提问作者bogdanbrudiu