Question

我有一个下一个问题 - 尝试用谷歌找到它，但没有找到可以帮助我的东西。我有一个需要打印的大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>

Answer 1

首先，它是vertical-align: middle，而不是vertical-align: center，请参阅MDN - vertical-align。

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

html, body {
    height: 100%;
}

和

p.paragrpahs {
    height: 100%;
}

然后添加提到的“ghost”元素

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

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

更新

对于较长的文本（多行），遗憾的是，这不起作用。如果文本较长，可以将文本换行到span元素

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

并给它一个

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

然后，此inline-block span将再次与幽灵（:before）元素垂直对齐。

查看更新的JSFiddle。

Answer 2

假设.paper_card是您在打印过程中最外面的样式div，以下CSS将强制每一页到一页，拉伸它以适合打印页面（并调整纸张大小）。

CustomLog "/path/to/git.log" "%h %l %u %t \"%r\" %>s %b Git Project:%{GIT_PROJECT}e // %{LDAP_GROUP}e"

<LocationMatch "^/git/[^/]+">
    SetEnvIf Request_URI "/git/([^/]+)" GIT_PROJECT=$1
    SetEnvIf Request_URI "/git/([^/]+)" LDAP_GROUP=cn=$1,ou=projects,dc=mydomain,dc=com
    Order deny,allow
    AuthName "Authentication Required"
    AuthType Basic
    AuthBasicProvider ldap
    AuthLDAPUrl ldap://ldapserver/ou=people,dc=mydomain,dc=com?uid
    AuthLDAPGroupAttribute memberUid
    AuthLDAPGroupAttributeIsDN off

    # This one doesn't work --- %{GIT_PROJECT} shows up in my LDAP logs
    #Require ldap-group cn=%{GIT_PROJECT},ou=projects,dc=mydomain,dc=com

    # This similarly doesn't work --- %{LDAP_GROUP} shows up in my LDAP logs. 
    Require ldap-group "%{LDAP_GROUP}"

    # As a sanity check, I copied the LDAP group generated by a specific
    # request from the Apache log, and this works.
    #Require ldap-group cn=copied-from-log-apache-log,ou=projects,dc=mydomain,dc=com
</LocationMatch>

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

在页面中心的html中打印文本

2 个答案: