4

我有一个下一个问题 - 试图用谷歌找到它，但没有找到什么可以帮助我。我有一个需要打印的大 HTML 文件，用于分隔我使用 CSS 的页面break-after。问题是：如何在页面中心打印一个元素，不仅水平居中而且垂直。HTML 如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style>
            @media all {
                body
                {
                    text-align:left;
                }
                p.paragrpahs
                {
                    text-align:center;
                    font-family:Arial,Helvetica,sans-serif;
                    font-size:32px;
                    font-weight:bold;
                    vertical-align: center;
                }
                .break_here
                {
                    page-break-before:always;
                }
            }
        </style>
    </head>

    <body>
        *Tons of text*
        <p class="break_here"><p class="paragrpahs">Some text</p><p class="break_here">
        *Tons of text*
    </body>
</html>
4

3 回答 3

3

首先，它是vertical-align: middle，不是vertical-align: center，参见MDN-vertical-align。

有一篇关于CSS Tricks - Centering in the Unknown的好文章。将此转移到您的示例中，您必须首先设置

html, body {
    height: 100%;
}

和

p.paragrpahs {
    height: 100%;
}

然后添加提到的“幽灵”元素

p.paragrpahs:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

这将在整个页面上为您提供垂直居中的文本，请参阅JSFiddle。当您也将p.paragrpahs（原文如此？）用于其他事情时，您当然应该添加一个单独的vcenter类或类似的类。

更新：

不幸的是，对于较长的文本（多于一行），这不起作用。如果文本较长，可以将文本包装到span元素中

<p class="paragrpahs"><span>Lorem ipsum dolor sit amet, ...</span></p>

并给这个

p.paragrpahs span {
    display: inline-block;
}

然后这将再次与 ghost ( ) 元素inline-block span垂直对齐。:before

请参阅更新的 JSFiddle。

于 2013-11-05T21:34:15.177 回答
0

假设 .paper_card 是您在打印期间最外层样式的 div，下面的 CSS 将强制每个页面对应一页，拉伸它以适应打印页面（并调整纸张大小）。

  div.paper_card {
    position: relative;
    width: 60vh;
    height: 90vh;
    border: 1vh solid #ee6e73;
    border-radius: 5vh;
    margin: 20px auto;
    page-break-after: always;
  }

  @media print {
    div.paper_card {  
      margin: 0px auto; 
      top: 0px; 
      bottom: 0px; 
      width: auto;
      height: 100vh;
    }
  }

请注意，您应该对所有内部元素使用 vh 大小调整，以使其适应各种纸张尺寸。

于 2018-05-14T14:30:58.597 回答
0

这种flex方法对我有用。

在 CSS 中：

@media print {
    div.centerOnPrintedPage {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
    }
}

在 HTML 中：

<div class="centerOnPrintedPage">
    <h3>This page intentionally left blank.</h3>
</div>

在 Firefox、Google Chrome、Internet Explorer 和 Microsoft Edge 中测试。

于 2022-01-19T19:15:02.857 回答