修复html打印内容垂直居中答案

【问题标题】：Fix html printing content vertically centered修复html打印内容垂直居中
【发布时间】：2021-02-08 20:29:39
【问题描述】：

我有一个使用 bootstrap 4 编写的简单 html 页面。该页面的内容位于容器 > row > col 中，在大多数屏幕上看起来都不错，但是当我尝试打印它时，它在纸张/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>

【问题讨论】：

在<body> 中包含<style> 标签背后的想法是什么？ <style> 标签的唯一有效位置是在<head> 内。见<style>: The Style Information element。
对不起，这是我不了解标准和没有在我的渲染引擎中使用某些插槽功能的组合，以便将样式放在首位。我会解决这个问题

标签： html css bootstrap-4 printing

【解决方案1】：

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

【讨论】：