title: Horizontal centering text over image via CSS
body: <p>Consider the following html:</p>
  
  <pre><code>&lt;div class="image"&gt;
      &lt;img src="sample.png"/&gt;
      &lt;div class="text"&gt;
         Text of variable length
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where:</p>
  
  <pre><code>.image {
      position:relative;
      text-align:center; // doesn't work as desired :(
  }
  
  .text {
      position:absolute;
      top:30px;
  }
  </code></pre>
  
  <p>Can you please tell, if there is a way to horizontally align the text in the center of the <code>.image</code> div? I can't use the <code>left</code> property, since the length of the text is unknown and the <code>text-align</code> property doesn't work for the <code>.text</code> div :(</p>
  
  <p>Thank you. </p>