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

标签 css html navbar

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

我的 JSFiddle 在这里:

http://jsfiddle.net/G8CJ7/

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

最佳答案

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

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

关于css - 垂直对齐导航栏中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9476875/

相关文章:

CSS高度调整

css - Bootstrap - 将图像响应添加到 CSS 背景图像

php - 每当用户单击下拉列表时刷新下拉选项

CSS类顺序

javascript - 导航栏取决于宽度

java - 使用底部导航栏

javascript - 为什么菜单 JavaScript 效果不起作用?

html - iPad 的简单 HTML 布局

html - 修复渐变 :hover glow in Firefox

css - Bootstrap Lumen 主题的 NavBar 问题