0
210
Vistasmake content in the middle of the page in printing page
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 👇
this is the correct position 👇
any CSS or JS answer may be working. but I have no idea.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta