有谁知道如何在8.5x11纸的页面中间对齐可打印内容?这是我的div

<div id = "printable">
<table>
//my table content
</table>
</div>


我尝试使用此CSS

@media print {
#printable{
     position:absolute;
     width:300px;
     height:300px;
     z-index:15;
     top:50%;
     left:50%;
     margin:-150px 0 0 -150px;
     }
}


但是点击我的打印按钮会做这个jQuery的事情

var restorepage = document.body.innerHTML;
var printcontent = document.getElementById('printable').innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
location.reload();


使用此jQuery将在后台替换整个页面内容
打印以恢复以前的内容后,这就是为什么将div居中不起作用的原因TYIA帮助我

最佳答案

请在下面找到仅将内容居中打印的示例



var restorepage = document.body.innerHTML;
var printcontent = document.getElementById('printable').innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
//location.reload();

@media print {
#printable{
     display:flex;
     justify-content:center;
     align-items:center;
     height:100%;
     }
    html, body{
      height:100%;
      width:100%;
    }
}

<div id = "printable">
<table border="1">
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
</div>

10-06 05:27
查看更多