html - 打印对齐和定位标题

Question

我正在尝试打印 fiddle 所在的页面 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&amp;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 &amp; 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 和子 div 提供各种样式。为了在每一页上打印标题，我尝试固定标题。但是 Logo 与第二页的内容重叠。在此方面提供任何形式的帮助表示赞赏。请帮忙。

注:请查看http://jsfiddle.net/3J8TD/7/show/的打印预览而不是 HTML。

Answer 1

对您的代码进行一些更改，减少 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;
}

检查这个Demo

实际 View 在这里 http://jsfiddle.net/amoljawale/3J8TD/8/show/