Adding text beneath a row of images using CSS

I've been stuck on this for hours and for some reason I can't figure out why I can't add text below images with links. I have no problem adding text below images with no links, but when I add the extra line for a url, it doesn't format properly.

<div class = "wrapper">
<a href = "">
     <img src = ""/>
     <span class="text">something</span>
</a>
</div>
<div class = "wrapper">
<a href = "">
    <img src = ""/>
    <span class="text">something</span>
</a>
</div>
<div class = "wrapper">
<a href = "">
    <img src = ""/>
    <span class="text">something</span>
</a>
</div>

My css is as follows:

.wrapper
{
    vertical-align:top;
    display:inline-block;
    text-align: center;
    width:220px;
}

img
{
    display:inline-block;
    margin-left: 160px;
    float:left;*/
    width:200px;
    height:200px;
}

.text
{   
    display:block;
}

Thanks