在导航栏中垂直对齐文本

Question

我想使用 <span> 来移动我的导航栏中的一些文本。我的导航栏是一个 <ul>，其中的元素都是 <li>，但文本却位于导航栏顶部，我希望它在垂直方向上居中。就像你在 JSFiddle 中看到的那样，我正在使用 CSS 中的 a:hover 属性来改变鼠标悬停时的文本背景和颜色。但当我仅对文本应用 span 时，整个悬停区域也会被一起移动。请看能否理解我的意思。

我的 JSFiddle 在这里：

http://jsfiddle.net/G8CJ7/

基本上，我只想以简洁明了的方式垂直对齐文本。最初，我使用''标签并在它们上设置间距，但为了改善 SEO，我想避免使用标题标签。谢谢。

- MillerMedia

Answer 1

增加行高是可以的，你也可以在顶部添加填充：

.class { padding-top: 10px; }

调整填充以居中显示。

- alairock

Answer 2

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

为了垂直居中文本，增加了line-height:40px。但由于IE7不完全支持，因此需要使用有条件的样式表，在li上添加padding-top来解决该问题。

- Justice Erolin

Answer 3

几年后更新，但始终有使用以下选项的选择：

display:table;
display:table-row;
display:table-cell;

使用vertical-align:middle;来居中元素。我现在更喜欢这种方法，因为你可以对显示样式应用响应式规则（例如，如果需要更新其他屏幕尺寸的样式，可以将其更改为display:block和display:inline-block等）。这里是一个示例：

http://jsfiddle.net/G8CJ7/68/

- MillerMedia