title: Center a barcode on a printout
body: <p>I'm printing a receipt with a bar code using jQuery Barcode. No matter what I do I can't center this at the bottom of the receipt, it always appears left aligned. I've tried using a centered Div wrapped around the Barcode like this</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="bc_center"&gt;
      &lt;p id="pr-bcTarget"&gt;&lt;/p&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.bc_center {
     float: none;
     margin-left: auto;
     margin-right: auto;
  }
  </code></pre>
  
  <p>I have also tried a large variety of css options from other StackOverflow suggestions. Nothing works so far.</p>
  
  <p>The  jQuery/JavaScript code creating the bar code looks like this</p>
  
  <pre><code>var bar0 = "&lt;div style=\"float: left; font-size: 0px; background-color: " + settings.bgColor + "; height: " + mh + "px; width: &amp;Wpx\"&gt;&lt;/div&gt;";    
  var bar1 = "&lt;div style=\"float: left; font-size: 0px; width:0; border-left: &amp;Wpx solid " + settings.color + "; height: " + mh + "px;\"&gt;&lt;/div&gt;";
  </code></pre>
  
  <p>I'm certain it has to do with the "float: left", and I tried removing this, of course what happened was each line of the barcode appeared on a separate line.</p>
  
  <p>EDIT: I tried a couple of the suggestions below. The code I have now is just this</p>
  
  <pre><code>&lt;span class="bc_center" id="pr-bcTarget"&gt;&lt;/span&gt; 
  </code></pre>
  
  <p>which produces the exact same results as my original. Using Chrome Inspect this is what "jQuery barcode"  is generating...</p>
  
  <pre><code>&lt;span class="bc_center" id="pr-bcTarget" style="padding: 0px; overflow: auto; width: 77px;"&gt;
      &lt;div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 10px"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 50px;"&gt;&lt;/div&gt;
      ... etc ...
      &lt;div style="clear:both; width: 100%; background-color: #FFFFFF; color: #000000; text-align: center; font-size: 10px; margin-top: 5px;"&gt;1179&lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>You'll notice "clear:both" in the final div which allows the barcode number "1179" to be centered, which it does.</p>