Css 如何设置水平菜单的样式，使图像位于顶部，文本居中？

通过考虑下图，表示此菜单交互的3种状态：

并知道：

1）我们不能为所有水平菜单提供一个图像，每个项目（因此，每个ul li a）都应该有自己的图像

2） 背景图像定位将受到青睐，因为它将更好地解决跨浏览器问题

3） 这些按钮上的文本（应该）是文本，而不是图像

实现这一目标的最佳方式是什么？ 我只需要在这里开球

谢谢

更新：

下面是一个不交换图像的测试：

---

很简单，我想你已经自己详细说明了你的解决方案

导航中的每个项目都需要一个图像，其中有三种状态用于滚动和活动状态。然后，您将使用CSS移动背景图像，正如您所提到的，这取决于您布局图像的方式

让css有点棘手的是按钮上的文本定位（你会写很多），如果文本从很多不同的y坐标开始，那么很明显你会将其中的每一个都写到css中

我会根据每个按钮的单独图像，使用与下面类似的代码（未测试）设置导航，其中包含按钮的常规状态、翻转下方以及按钮的活动状态

/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{

    display:block;
    width:150px;
    height:100px;
    text-align:center;
    background-position:0 0;
}

ul li{

    float:left;
}

/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }

/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }

/* define each button (background image and text position) */
ul li a.dashboard
{
    background-image:url(images/dashboard.png); /* define image url */
    padding-top:40px; /* position the text using a combination of padding / height) */
    height: 60px;

}
ul li a.products
{
    background-image:url(images/products.png); /* define image url */
    padding-top:30px; /* position the text using a combination of padding / height) */
    height: 70px;

}
...

然后我会非常简单地使用html：

<ul>
    <li><a href="dashboard.html" class="dashboard active">Dashboard</a></li>
    <li><a href="products.html" class="products">Products &amp; Services</a></li>
    ...
</ul>

...

---

如果您有任何问题，请告诉我，我实际上还没有测试代码，但这是我对大多数基于html/css的导航的一般方法，无论是垂直导航还是水平导航（尽管我会对所有按钮的所有翻滚状态使用一个大图像）。

非常感谢！我将尝试遵循它，但在我这样做之前，让我问一些关于文本位置的问题：文本的长度将有所不同，因为我们将允许几种语言的翻译。考虑到这一点，在这种情况下，填充和边距将如何工作？问题2:：）你说：“尽管我会对所有按钮的所有滚动状态使用一个大图像”-如果用户选择在is/她的浏览器上使用更大的字体大小，这将如何工作？嗯，那么这有点棘手。如果您需要动态文本，那么我想这也会影响图像的位置？如果是这样的话，我就不会把这些图像作为背景图像，因为你不能根据文本大小/长度移动这些图像…这些图像将始终位于中心，以定义相等的宽度。只有文本应该改变，所以我们需要以某种方式使用文本对齐中心。。。我会在这里尝试一些东西，如果发现有用的东西，会告诉你。：）我们对图像使用空范围，但是，尽管如此，应该可以很好地工作。事实上，我们使用一个或多个图像在这里实际上是没有问题的，因为这两个图像应该与流体浮动布局同等工作。-我开始了这个css，但是这个解决方案的大部分学分应该归Paul O'B。只是一个附带的请求。。。我在哪里可以得到上面菜单的CSS？谢谢。看看这里：谢谢。但是主题的确切CSS/HTML。我看了一下，它看起来像是一个付费菜单系统。这是定制的。没有主题。；）有机会分享吗？：）