CSS-Zentriercontainer auf gedruckten Seiten bei Seitenumbruch

Question

Gibt es eine Möglichkeit, einen Container vertikal zu zentrieren, wenn er beim Drucken auf eine neue Seite gestoßen wird?

Wie das Diagramm zeigt, kann Container A zu groß werden, so dass A und B ihre eigenen Seiten belegen. Wenn das passiert, möchte ich, dass B oder beide zentriert sind.

+----------------+  +----------------+ +----------------+ 
| +------------+ |  |    | |    | 
| |   | |  | +------------+ | |    | 
| |  A  | |  | |   | | |    | 
| |   | |  | |   | | | +------------+ | 
| +------------+ |  | |   | | | |   | | 
|    | +---> | |  A  | | | |  B  | | 
| +------------+ |  | |   | | | |   | | 
| |   | |  | |   | | | +------------+ | 
| |  B  | |  | |   | | |    | 
| |   | |  | +------------+ | |    | 
| +------------+ |  |    | |    | 
+----------------+  +----------------+ +----------------+ 

Wir verwenden wkhtmltopdf, um die PDFs zu generieren. In unserem Fall genügt es, aus dem PDF zu drucken. Aber soweit ich weiß, unterstützt wkhtmltopdf keine Zentrierung wie diese. Ich frage mich, ob dies über CSS und/oder Javascript erreicht werden kann.

Eine Idee ist, die Höhe des Containers zu berechnen und den entsprechenden oberen Rand in JS einzustellen. Aber das erfordert die Kenntnis, wann/wenn der Container auf die nächste Seite verschoben wird, nehme ich an?

Answer 1

Soweit ich weiß, unterstützen Browser derzeit nichts dergleichen. Das Problem hierbei ist, dass der Browser nichts darüber weiß, wie die Hardware für tausende verschiedene Drucker funktioniert.

Es sei denn, das Betriebssystem stellt jedem Drucker API zur Verfügung, was nie passieren wird.

Answer 2

das ist ein langer Schuss, aber Sie können js dazu verwenden.

Berechnen Sie die Containergröße. Sie kennen die Papiergröße bereits.

Also alles, was Sie tun müssen, ist

„page-break-after: immer“ add

, wenn beide Ihre Elemente werden nicht auf der gleichen Seite mit dem zweiten Element passen und dann hängen Sie einfach Marge an den jeweils Element von

calcuated_value = mit (total_size - element_size)/2

$ (‘element_name.) css ("margin:" + calculated_value "+" auto;")

hoffe das funktioniert.

Answer 3

Es sieht so aus, als ob der Browser keinen Unterschied zwischen Ihrem Bildschirm und einem Blatt Papier macht: Er kennt die Größe jedes Mediums.

Demo here, getestet in Firefox und Chrome.

Ich versuchte mit einer einfachen Zentrierungstechnik (height:100% und vertical-align:middle in einer Tabelle) und es funktioniert perfekt. Das einzige Problem ist, dass alle Container jeweils eine Seite belegen.

Sie können die Arten festgelegt nur für den Drucker, der Art wie folgt aus:

@media print { 
    html, body, .page { 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    } 
} 

Answer 4

Hier ist, wie ich dieses Problem gelöst:

html, body{margin: 0; padding: 0;} 
.page{box-sizing: border-box; height: 100%; width: 100%; border: 1px solid transparent; page-break-after: always;} 
.page-middle{height: 100%; width: 100%; display: table;} 
.page-middle-inner{height: 100%; width: 100%; display: table-cell; vertical-align: middle;} 

Wie Sie ich Grenze verwendet werden bemerkt haben: 1px durchsichtig transparent; . Ich kann es wirklich nicht erklären, aber aus irgendeinem Grund, wenn ich diesen Rand entferne, gehen einige Seiten auf eine andere Seite.