i have multiple `div` with a `image` and a `spam` and html is :

```
<div style="background:red">
    <img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="400px" />
   <span class="text">Center Text</span>      
</div>

<div style="background:red">
    <img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="300px" />
   <span class="text">Center Text</span>      
</div>

<div style="background:red">
    <img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="500px" />
   <span class="text">Center Text</span>      
</div>

```

and jsfiddel is <http://jsfiddle.net/Azb99/3/>

i try to set `<span class="text">Center Text</span>` text to center of image and image is dynamic sized. 

i try this css :

```
.text {
position:relative;
top:-50%;
left:50%;
text-align:center;
background:#fff;
padding:5px;
border:1px solid #ccc; 
}

```

how can is set `Center Text` text to center and middle of image ?

see <http://jsfiddle.net/Azb99/8/> to help more..