Question

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

我的JSFiddle就在这里：

http://jsfiddle.net/G8CJ7/

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

Answer 1

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

添加了行高：40px以垂直居中文本。 IE7会有问题，因为它不完全支持，因此在li上使用padding-top的条件样式表将解决它。

Answer 2

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

.class { padding-top: 10px; }

将填充调整为居中。

Answer 3

几年后更新这个，但总是可以选择使用：

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

with vertical-align：middle;为了使项目居中。我现在更喜欢这种方法，因为您可以将响应规则应用于显示样式（例如，将其更改为显示：块和显示：内联块等，如果您需要更新其他屏幕尺寸。这是一个小提琴：

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

在Navbar中垂直对齐文本

3 个答案: