css - 垂直对齐导航栏中的文本

Question

我正在尝试使用 <span>在我的导航栏中移动一些文本。我的导航栏是 <ul>元素都是<li> s 但文本与导航栏的顶部对齐，我希望它垂直居中。正如您在 JSFiddle 中看到的那样，我在 CSS 中使用 a:hover 属性来更改文本悬停时的背景和颜色。当我将跨度仅应用于文本时，整个悬停部分也会移动。看看你能不能明白我的意思。

我的 JSFiddle 在这里:

http://jsfiddle.net/G8CJ7/

基本上我只希望文本以简单、简洁的方式垂直对齐。最初我使用 '' 标签并为它们设置边距，但我想避免为此目的使用标题标签以改进 SEO。谢谢。

Answer 1

http://jsfiddle.net/G8CJ7/1/

添加 line-height:40px 使文本垂直居中。 IE7 会遇到此问题，因为它未得到完全支持，因此在 li 上带有 padding-top 的条件样式表将解决它。