Getting text to display under an image in a navigation

Question

I want my navigation to look like this:

<icon>       <icon>       <icon>
Title     Longer Title    Title

Ideally, I want my code to look like:

<li>
    <img src="images/icon.png" />
    <a class="link_title">Title 1</a>
</li>
<li>
    <img src="images/icon.png"/>
    <a class="link_title">Title 2</a>
</li>
<li>
    <img src="images/icon.png"/>
    <a class="link_title">Title 3</a>
</li>

I already have it horizontal, but not sure how to get the link to appear right under the icon, without using a table, which I don't want to do. (Let me know if I must, though.)

Answer 1

try this:

li {
float:left;
text-align:center;
}

li a {
display:block;  
}

li img {
margin:0 auto;  
}

Answer 2

li { text-align:center; }
li a.link_title { display:block; }

Also, you're closing your <a> tags with a </span>. This needs to be corrected:

<a class="link_title">Some Text</a>