我正在尝试使用<span> 在我的导航栏中移动一些文本。我的导航栏是<ul>，元素都是<li>s，但文本与导航栏的顶部对齐，我希望它垂直居中。正如您在 JSFiddle 中看到的，我在 CSS 中使用 a:hover 属性来更改悬停在文本上时的背景和颜色。当我将跨度仅应用于文本时，整个悬停部分也会移动。看看你能不能明白我的意思。
我的 JSFiddle 在这里：
基本上我只是希望文本以一种简单、简洁的方式垂直对齐。最初我使用''标签并在它们上设置边距，但我想避免为此目的使用标题标签以改进 SEO。谢谢。
【问题讨论】：
添加 line-height:40px 以使文本垂直居中。 IE7 会遇到这个问题，因为它没有得到完全支持，所以在 li 上带有 padding-top 的条件样式表将解决它。
【讨论】：
添加行高有效，您还可以在顶部添加填充：
.class { padding-top: 10px; }
将内边距调整到中心。
【讨论】：
几年后更新，但始终可以选择使用：
display:table;
display:table-row;
display:table-cell;
垂直对齐：中间；为了使项目居中。这些天我更喜欢这种方法，因为您可以将响应规则应用于显示样式（例如，如果您需要针对其他屏幕尺寸对其进行更新，请将其更改为 display:block 和 display:inline-block 等。这是一个小提琴：
【讨论】：