打印对齐和定位标题
[英]Print alignment and positioning header
问题描述
我正在尝试打印http://jsfiddle.net/3J8TD/7/show/的小提琴页面。 问题是，它没有居中对齐，并且没有在每页中打印标题。 看这个截图。
HTML：
<div style="" class="invoice-parent">
<div class="logo-container">
<div class="float-left"><img width="115" height="86" src="http://fc06.deviantart.net/fs70/i/2010/131/5/8/Dummy_company__Sample_logo_PSD_by_SolidSilver.jpg" ></div>
<div style="margin-top: 35px" class="float-left"><h1>Sample HEALTHCARE</h1></div>
</div>
<br clear="all" style="margin: 60px;">
<div class="left-address">
<u>C&F</u>: 21A/3, XXXXXX Street,<br>
<div style="margin-left:30px">
Collectorate,<br>
Abccde-324245,<br>
Qds dfs.<br>
Contact no. +91- 999999999999.<br>
Email: info@sampledomain.ext
</div>
</div>
<div class="right-address">
<u style="padding-right: 25px;">Corporate office:</u>
<div class="float-right">
78,8th Cross st,<br>
OMR,Koppasa,<br>
Chansoi -224 097.
</div>
</div>
<br clear="all">
<div id="bill_type">INVOICE</div>
<hr>
<div id="tin_cst_dll">
<span id="id-center">CST: 1085914</span>
</div>
<span style="margin-top: -16px;" class="float-left" id="id-left">TIN: 33893767761</span>
<span style="margin-top: -16px;" class="float-right" id="id-right">DL: TRT 2605/20B/2436/21B</span>
<hr>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<td valign="top">
To: <strong id="to_name">Peter Agency</strong>,<br>
<div id="to_addresses">No.4, Fernanderz lane,<br>
Pandy street,<br>
Hobai - 982198. 0782-4379540
</div>
<strong>
<div id="customer_tin" class="float-left">Tin : 33893767754</div>
<div id="customer_dl" style="text-align: right;" class="float-right">DL no. : TRT 2605/20B/5342/21B</div>
<strong>
</strong></strong></td>
<td valign="top">
<div class="float-left" id="invnum"></div> <div class="float-right">Date: 12-07-2014</div><br>
</td>
</tr>
</tbody></table>
<div id="replacement_period" style="visibility: hidden;">Product Replacement for the period 01-03-2014 to 31-03-2014</div>
<table width="100%" border="1" align="left" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<th valign="top">
S.no.
</th>
<th valign="top">
Product name
</th>
<th valign="top">
Packing
</th>
<th valign="top">
Batch no.
</th>
<th valign="top">
MFG Date
</th>
<th valign="top">
EXP date
</th>
<th valign="top">
MRP
</th>
<th valign="top">
Qty
</th>
<th valign="top" id="pts_head">
PTS
</th>
<th valign="top" id="amount_head">
Amount
</th>
</tr>
<tr class="item-row">
<td valign="top">
<div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">1</div>
</td>
<td valign="top">
CLOPS-75
</td>
<td valign="top">
<div class="packing">12</div>
</td>
<td valign="top">
<div class="batch">CL75</div>
</td>
<td valign="top">
<div class="mfg_date">06/2006</div>
</td>
<td valign="top">
<div class="exp_date">06/2022</div>
</td>
<td valign="top">
<div class="cost">575</div>
</td>
<td valign="top">8</td>
<td valign="top">
<div class="pts">414.00</div>
</td>
<td valign="top">
<div class="price">3312.00</div>
</td>
</tr><tr class="item-row"> <td valign="top"> <div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">2</div></td> <td valign="top">CLOPS-A </td> <td valign="top"> <div class="packing">12</div> </td> <td valign="top"> <div class="batch">CLA</div> </td> <td valign="top"> <div class="mfg_date">06/2006</div> </td> <td valign="top"> <div class="exp_date">06/2022</div> </td> <td valign="top"> <div class="cost">575</div> </td> <td valign="top">2</td> <td valign="top"> <div class="pts">414.00</div> </td> <td valign="top"> <div class="price">828.00</div> </td> </tr>
<tr class="item-calc">
<td class="blank vishide" colspan="8">By Cheque or Cash or DD.</td>
<td class="total-line balance">Subtotal</td>
<td class="total-value blank-value"><div id="sub_total">4140.00</div></td>
</tr>
<tr class="item-calc">
<td style="visibility: visible;" class="blank vishide" colspan="8">
Amount in words: <span id="number_in_words">Four thousand three hundred and forty seven rupees only </span>
</td>
<td class="total-line balance">Vat (5%)</td>
<td class="total-value blank-value"><div id="vat">207.00</div></td>
</tr>
<tr class="item-calc">
<td class="blank blank-bottom" colspan="8"> </td>
<td class="total-line balance">Grand Total</td>
<td class="total-value blank-value"><div id="grand_total">4347.00</div></td>
</tr>
</tbody></table>
<br clear="all">
<br clear="all">
<div id="tandc">
<u><b>Terms & Conditions</b></u>
<ul>
<li>All disputes subject to Chanso Jurisdiction only.</li>
<li>Certified that the particulars given above are true and correct.</li>
<li>And the amount indicated represents the price actually charged. </li>
<li>Cheques are subject to realisation for Aura Healthcare.</li>
</ul>
</div>
<div id="aura-signature">
For Sample Healthcare,<br><br><br>
<b>Authorised</b> <b>signatory.</b>
</div>
</div>
CSS：
@media print {
body * {
visibility: hidden;
}
div.invoice-parent, div.invoice-parent * {
visibility: visible;
}
div.invoice-parent {
left: 0;
top: 0;
position: absolute;
}
}
body { font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif"; }
div.invoice-parent { width: 80%; margin: 0 auto; }
div.logo-container { width: 63%; margin: 0 auto; }
div.left-address { float: left; font-size: 15px;}
div.right-address { float: right; font-size: 15px;}
div#to_addresses { margin-left:30px; }
div#replacement_period { font-weight:bold; margin: 10px 0 10px 0; text-align: center; }
div#bill_type { font-size: 15px; font-weight: bold; margin: 20px; text-align: center; }
div#tandc { float: left; font-size: 12px; margin-top: 10px; width: 500px; }
div#aura-signature { margin-top:30px; float:right; }
hr { color: #4B78BB; margin: 20px 0;}
h1 { font-size: 35px; }
.float-left { float: left; }
.float-right { float: right; }
div#tin_cst_dll { left: 50%;
text-align: center;
top: 50%; }
span#id-center { margin:0 auto }
table.invoice-related { border-collapse: collapse; font-size: 13px;}
table.invoice-related td, table.invoice-related th {
border: 1px solid #000000;
padding: 5px;
}
table.invoice-related tr.item-calc {
height: 32px;
border-left: 1px solid #fff;
}
table.invoice-related td.blank {
border: 0 none;
}
table.invoice-related td.blank-value {
border-left: 0 none;
}
table.invoice-related td.blank-bottom {
border-bottom: 1px solid #FFFFFF;
}
table.invoice-related td.total-line {
border-right: 0 none;
text-align: right;
}
textarea { border: 0; overflow: hidden; resize: none; }
input.qty { border: 0 none; width: 40px; }
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
input.qty:hover, input.qty:focus { border: 0 none; overflow: hidden; resize: none; background-color: #EEFF88;}
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
我尝试为父级和子级div提供各种样式。 为了在每个页面上抬头，我尝试将标题固定。 但是徽标与第二页的内容重叠。 任何帮助，对此表示赞赏。 请帮忙。
注意：请检查http://jsfiddle.net/3J8TD/7/show/而不是HTML的打印预览。
1 个解决方案
解决方案1
0 2014-07-12 09:26:57
使你的代码的一些变化，减少了top margin的div来25px和去除margin的<h1>
<div style="margin-top: 25px" class="float-left"> <h1 style="margin: 0">Sample HEALTHCARE</h1> </div>
添加overflow:hidden; 到div.logo-container并使其width: 100%
div.logo-container { width: 100%; margin: 0 auto; overflow: hidden; }
检查这个演示
标头/内容对齐/位置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.