Question

我正在将一些旧的手动生成的打印输出转换为动态创建的打印输出，这些打印输出在浏览器中工作并打印。他们有侧边栏和多页（通常）的内容。内容分为几个部分，以避免分页。

我的html结构看起来像这样，但有更多的部分和数字：

<body>
    <div class="container-fluid">
        <article class="col-md-push-3 col-md-9">
            <img class="pull-right img-responsive logo" src="http://adm25512/factsheet/images/logo.jpg" />
            <section>
                <h2>Content section title</h2>
                <p>Lots of content in here - sometimes more than a page.</p>
                <figure>
                    <img src="coolimg.png" alt="accessibility"/>
                    <figcaption>What a cool image!</figcaption>
                </figure>
            </section>
            <section>
                <h2>There are several sections of varying lengths</h2>
                <p>Content</p>
            </section>
        </article>
        <aside class="sidebar col-md-3 col-md-pull-9 hidden-sm hidden-xs"> 
            <section>
                <h4>There's only one section over here</h4>
                <p>Content</p>
            </section>
            <figure>
                <img src="coolimg2.png" alt="accessibility"/>
                <figcaption>But a lot of figures</figcaption>
            </figure>
        </aside>
    </div>
</body>

CSS的相关内容：

section:nth-of-type(n+2), figure { /* n+2 because we want the first one to be on the first page regardless of whether the header pushes it onto the next page. */
    page-break-inside:avoid;
}

aside {
    float:left;
    width:33vw;
    background-color:#eee;
    padding:0;
    min-height:100%;
}

article {
    float:right;
    width:60vw;
    margin-left:2vw;
}

我想要的是每个页面上显示的部分在页面上垂直居中 - 例如，如果我的部分只有10行，那么它应该在中间打印的页面。我尝试了这个，但它没有用，这是预期的。

@page {
    min-height:100vh;
    display:flex;
    align-items:center;
}

一个方便的图像显示了我想要完成的事情：

其他说明：我没有在打印样式表中使用引导程序或其他任何内容，并且打印布局的处理方式与Web布局不同。因此规则之间不会发生任何冲突。如果有一种方法可以在打印之前可靠地触发它并在发送打印后撤消它，那么我可以使用javascript作为解决方案 - 即它不会破坏浏览器中的内容。

打印页面上的中心内容块

0 个答案: