title: set span position to center
body: <p>i have multiple <code>div</code> with a <code>image</code> and a <code>spam</code>  and html is :</p>
  
  <pre><code>&lt;div style="background:red"&gt;
      &lt;img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="400px" /&gt;
     &lt;span class="text"&gt;Center Text&lt;/span&gt;      
  &lt;/div&gt;
  
  &lt;div style="background:red"&gt;
      &lt;img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="300px" /&gt;
     &lt;span class="text"&gt;Center Text&lt;/span&gt;      
  &lt;/div&gt;
  
  &lt;div style="background:red"&gt;
      &lt;img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="500px" /&gt;
     &lt;span class="text"&gt;Center Text&lt;/span&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>and jsfiddel is <a href="http://jsfiddle.net/Azb99/3/" rel="nofollow">http://jsfiddle.net/Azb99/3/</a></p>
  
  <p>i try to set <code>&lt;span class="text"&gt;Center Text&lt;/span&gt;</code> text to center of image and image is dynamic sized. </p>
  
  <p>i try this css :</p>
  
  <pre><code>.text {
  position:relative;
  top:-50%;
  left:50%;
  text-align:center;
  background:#fff;
  padding:5px;
  border:1px solid #ccc; 
  }
  </code></pre>
  
  <p>how can is set <code>Center Text</code> text to center and middle of image ?</p>
  
  <p>see <a href="http://jsfiddle.net/Azb99/8/" rel="nofollow">http://jsfiddle.net/Azb99/8/</a> to help more..</p>