2016-03-03 198 views
-3

我有這樣的HTML結構:CSS打印網頁

<body> 
    <header></header> 
    <div class='main container'> 
    <div class='sidebar'></div> 
    <div class='content'> 
     <table id='sortthis'></table> 
    </div> 
    </div> 
    <footer></footer> 
</body> 

但是當我嘗試打印預覽,內容呈現有點向右(這是它的實際網頁上的位置)。

如何居中此內容?或者這是一個佔據頁面內空間的無形元素的問題?我很確定我沒有這些。

我已經設置所顯示的元素215.9毫米的最大寬度(@頁大小:法律;保證金:12.7毫米;)

編輯:

@media print 
    { 
    body * {margin:0; padding:0} 
    body, #sortthis {border:1px solid #000;}  
    body header, body footer {display:none;} 
    div.main.container div.sidebar {display:none;} 
    div.main.container div.content > :not(#sortthis) {display:none;} 
    div.main.container div.content > #sortthis {color:#000;} 
    #sortthis tbody tr > td.exclude, #sortthis thead tr > th.exclude {display:none;} 
    #sortthis {margin:0 auto, padding:0; width:215.9mm;} 
    } 

    @page { 
    size: letter portrait; 
    margin: 12.7mm; 
    } 

回答

-1

您可以設置打印樣式表以便您可以在不影響主要前端樣式的情況下更改佈局。

例如:

@media print { 
    … 
} 
+0

我已經做了,它還是老樣子莫名其妙到打印頁面的右邊。請回顧我上面的CSS。 – Valkyrurr