css - 使文本显示在导航中的图像下方

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>