Получение текста для отображения под изображением в навигации

Question

Я хочу, чтобы моя навигация выглядела так:

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

В идеале я хочу, чтобы мой код выглядел так:

<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>

У меня уже есть горизонтальное положение, но я не уверен, как заставить ссылку отображаться прямо под значком, без использования таблицы, чего я не хочу делать. (Дайте мне знать, если я должен.)

Answer 1

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

Кроме того, вы закрываете свои <a> теги с помощью </span>. Это должно быть исправлено:

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

Answer 2

попробуйте это:

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

li a {
display:block;  
}

li img {
margin:0 auto;  
}