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

Question

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

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

谁能提供一个如何做到这一点的例子？如果它有帮助，它基本上看起来像......

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

Answer 1

通过适当地应用于元素，可以background-position在 CSS 中轻松实现效果：padding-topli

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;
}​