0
211
Viewshacer contenido en el medio de la página en la página de impresión
Tengo un artículo largo, quiero diseñarlo para que el usuario se sienta realmente bien cuando quiera imprimirlo.
este es mi primer estilo:
@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; } }Así que ahora quiero establecer el contenido de la página en el medio de la página para que cuando el contenido de la página no llene la página, este contenido estará en el medio de la página.
esta es la posición incorrecta 👇
esta es la posición correcta 👇
cualquier respuesta CSS o JS puede estar funcionando. pero no tengo idea
·
Juan Pablo Isaza
1 answers
Answer question0
Dado que conocemos el tamaño de impresión (supongo que A4), podemos comenzar el contenido al 50 % de la altura total y luego subirlo un 50 % de la altura propia. Las propiedades CSS padding-top y translateY pueden funcionar en un CSS de impresión:
<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
Report
Answer question