0

I have a long article, I want to design it for a real good feeling when the user wants to print.

this is my first style:

@media print {
            h2 {
                page-break-before: always;
            }
            pre, blockquote,table, figure {
                page-break-inside: avoid;
            }
            h1, h2, h3, h4, h5 {
                page-break-after: avoid;
                page-break-inside:avoid;
            }
            h1+p, h2+p, h3+p {
                page-break-before: avoid;
            }
        }

So now I want to set the content of the page in the middle of the page so that when the content of the page does not fill the page, this content will be in the middle of the page.

this is the wrong position

wrong position

this is the correct position

enter image description here

any CSS or JS answer may be working. but I have no idea.

ttrasn
  • 4,322
  • 4
  • 26
  • 43
  • You may find here: https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div – Mani Nov 30 '21 at 07:04
  • @Mani thanks. but I was told I have an article, so I don't know which item must be styled. – ttrasn Nov 30 '21 at 07:11

1 Answers1

0

Since we know the print size (I supposed A4), we can start the content at the 50% of the full height and then move it up a 50% of self height. The CSS properties padding-top and translateY can work in a print CSS:


<style type="text/css" media="print">
    .vertical-center__wrapper {
        page-break-before: always;
        /* A4 size is 210 x 297 mm. 50% is 148, but I use 130 to avoid print margins.*/
        padding-top: 130mm;
        /* Note that margin-top don't work in firefox. */
    }
    .vertical-center {
        /* Translate vertically 50% up based on self height */
        transform: translateY(-50%);
    }
</style>


<p>
 a previous page content...
</p>

<div class="vertical-center__wrapper">
    <div class="vertical-center">
        <p>I'm vertical centered</p>
    </div>
</div>
Tonio
  • 1,642
  • 1
  • 4
  • 10
  • Thanks but how can I find it's a new page ? And I don't know what the element is, just I know it will start with the `h1` tag. – ttrasn Nov 30 '21 at 08:54
  • 1
    Ahh @ttrasn. I'm sorry it didn't help you. You are facing a difficult problem. – Tonio Nov 30 '21 at 09:24