获取文本以显示在导航中的图像下方答案

【问题标题】：Getting text to display under an image in a navigation获取文本以显示在导航中的图像下方
【发布时间】：2010-01-18 21:57:16
【问题描述】：

我希望我的导航看起来像这样：

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

我已经将它水平放置，但不知道如何在不使用表格的情况下让链接显示在图标正下方，我不想这样做。（如果必须的话，请告诉我。）

【问题讨论】：

标签： css formatting styling

【解决方案1】：

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

另外，您将使用</span> 关闭您的<a> 标签。这需要更正：

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

【讨论】：

【解决方案2】：

试试这个：

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

li a {
display:block;  
}

li img {
margin:0 auto;  
}

【讨论】：