title: Centering Text over Image
body: <p>Here's my summarized code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
        &lt;div&gt;
        &lt;img src="Pictures/titlepic.jpg" width="1035" height="200"&gt;
        &lt;h1 class="text_over_image"&gt;Welcome to my Sandbox&lt;/h1&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrap{
      width: 1060px;
      margin: auto;
      }
  .text_over_image{
      position: absolute;
      top: 20px;
      }   
  </code></pre>
  
  <p>I've tried <code>left: 50%</code>, <code>text-align:center</code>, any number of things with no great luck.  I didn't want to do a <code>left: 50px</code> (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values.  So the title could be short, or long and I want it to center no matter what.</p>
  
  <p>Ideas?</p>