Geek Answers Handbook

CSS vertical centering containers on printed pages on page break

Is there a way to vertically center the container if it hits a new page when printing?

As you can see from the diagram, container A may become too large for A and B to occupy their own pages. When this happens, I want B or both to be centered.

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

We use wkhtmltopdf to create PDF files. In our case, printing from PDF is enough. But as far as I know, wkhtmltopdf does not support this concentration. So I'm wondering if this can be done using css and / or javascript.

One idea is to calculate the height of the container and set the corresponding top edge in JS. But this requires knowledge of when / if the container moves to the next page, I guess?

+6
source share
4 answers

It doesn't seem like the browser makes a distinction between your screen and a piece of paper: it knows every average size.

Demo here , tested in Firefox and Chrome.

I tried with a simple centering technique ( height:100% and vertical-align:middle in the table) and it works fine. The only problem is that all containers will occupy the page each.

You can set styles only for the printer, for example:

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

As far as I know, browsers do not currently support anything like this. The problem here is that the browser does not know anything about how the hardware works for thousands of different printers.

If the operating system does not provide an API for each printer, that will never happen.

0
source

This is a long shot, but you can use js for this.

Calculate the size of the container. You already know the paper size.

So all you have to do is add

"page-break-after: always"

when both elements will not fit on the same page in the second element, and then just add margin to each element using

calcuated_value = (total_size - element_size) / 2

$ ('. element_name) .css ("margin:" + calculate_value "+" auto; ")

hope it works.

0
source

Here is how I solved this problem:

 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;}

As you can see, I used border: 1px solid transparent ;, I really can't explain it, but for some reason, when I delete this border, some pages go to another page.

0
source

More articles:


All Articles