CSS中带有图像+文本的水平导航栏

Question

我觉得自己是个白痴，不得不问这个问题，但我总是不惜一切代价回避CSS，现在我发现自己又需要它了，我一直在谷歌上寻找一个没有运气的例子。

基本上，我有特定于每个类别的图标，我想用这些图标在CSS/HTML中创建一个水平导航栏，但也在它们下面显示一个文本链接。我找到了做其中一个或另一个的片段，但每次我试图将两者结合在一起时，整个页面似乎都崩溃了。

有人能举例说明如何做到这一点吗？如果有帮助的话，基本上看起来。。。

[-IMAGE-]     [-IMAGE-]     [-IMAGE-]
[-TEXT-]      [-TEXT-]      [-TEXT-]

Answer 1

通过将适当的padding-top应用于li元素，可以很容易地通过CSS中的background-position获得效果：

background-position: top;
padding-top: 50px; /* Height of image */

这是一把小提琴的例子。

更新：

这是对不同li元素上的不同图像的更具描述性的篡改。

Answer 2

http://jsfiddle.net/LajUZ/2/

HTML:

<ul class="nav">
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
</ul>​

CSS：

.navitem
{
    float: left;
}​