修复 html 打印内容垂直居中

Question

我有一个使用 bootstrap 4 编写的简单 html 页面。该页面的内容位于容器 > 行 > 列中，在大多数屏幕上看起来都不错，但是当我尝试打印时它，它在 paper/PDF 中垂直居中。如何使此页面的内容在打印版式中位于纸张顶部？

这是 html 代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>my title</title>
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top .d-print-none">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
    aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"><img src="/logo.png" alt="myalt" class="logoIMG"></a>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/workers">Add worker</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/workers/list">List workers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/logout">Logout</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container mt-5">
<div class="row">
        <div class="col-md-12">
            <div class="text-center">
                <img class="mb-4" src="/logo.png" alt="" class="img-fluid" style="max-width: 40%; height: auto;">
            </div>
            <h1>Checklist for new worker</h1>

            <ul>
                <li>lorem: lorem</li>
                <li>lorem: lorem</li>
                <li>lorem: lorem</li>
            </ul>

             <h3>lorem</h3>
             <ul>
                 <li>lorem: lorem</li>
             </ul>
             <h3>lorem</h3>
             <ul>
            <li>lorem lorem</li>
            <li>lorem lorem</li>
            <li>lorem lorem</li>
            <li>lorem</li>
            <li>lorem lorem</li>
            <li>lorem</li>
            <li>lorem lorem</li>
            <li>lorem</li>
            <li>lorem</li>
            <li>lorem lorem</li>
            <li>lorem</li>
            <li>lorem</li>
            <li>lorem</li>
            <li>lorem</li>
            <li>lorem Quick lorem</li>
            <li>lorem</li>
            <li>lorem lorem (only lorem)</li>
        </ul>
    </div>
</div>
</div>

</main>
<style>
     .logoIMG {
       height: 2rem;
       width: auto;
     }

 </style>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
<style>
    html,
    body {
        height: 100%;
    }

    body {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-align: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
    }
</style>

Answer 1

问题是 body 标签的 align-items: center 属性。删除它修复了这种情况。当然它在那里是有原因的，但我只为我需要正确打印的页面更改了属性。我也可以使用 @media print { body { align-items: strech !important; } } 或类似的，所以它只适用于打印情况。

修复 html 打印内容垂直居中

Fix html printing content vertically centered

html

css

printing

bootstrap-4