html – Text align not working under div using javascript print button

html – Text align not working under div using javascript print button

Have a look at the following to point you in the right direction. Instead of changing the entire page and then reverting it, open a new window to do the print. This will stop any potentially nasty bugs appearing when revert the page. Also having 2 different class names for non-print and print DIVs may be useful. You can put these in an external CSS file and then add the CSS link to the new window aswell.


<html xmlns=http://www.w3.org/1999/xhtml>
  <head runat=server>

      <title>
      </title>

      <style>
        .myDiv {
          border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px;
        }
      </style>

      <script type=text/javascript>
        function printDiv(divID) {

          var div = document.getElementById(divID).outerHTML;
          var mywindow = window.open(, Print Contents);
          mywindow.document.write(<html><head><title>Print Contents</title>);
          mywindow.document.write(<style>.myDiv {border: 1px dotted black; text-align: center; width: 100%;}</style>);
          mywindow.document.write(</head><body>);
          mywindow.document.write(div);
          mywindow.document.write(</body></html>);

          mywindow.document.close();  // necessary for IE >= 10
          mywindow.focus();           // necessary for IE >= 10

          mywindow.print();
          mywindow.close();
        }
      </script>

  </head>
  <body>

      <form id=form1>
           <div id=DivForPrint class=myDiv>
              <span style=font-size: 10pt; font-weight: bold; font-family: Arial>Hello,
              <br />
              This is <span style=color: #0090CB>Mudassar Khan</span>.<br />
              Hoping that you are enjoying my articles!</span>
          </div>
          <br />
          <input type=button value=Print onclick=javascript: printDiv(DivForPrint) style=width: 80px; height: 30px; />
      </form>

  </body>
</html>

html – Text align not working under div using javascript print button

Leave a Reply

Your email address will not be published.