Bootstrap 3 - 使导航栏的链接随着品牌形象的大小垂直增长

Question

如果我从问题的屏幕截图开始，然后描述我想要发生的事情，这可能是最简单的。所以，这是我当前的导航栏：

如您所见，右侧链接的文本位于顶部。而且，这就是我创建的悬停效果当前正在做的事情：

我想做两件事：

1. 使导航栏<ul> 中<li> 元素的高度成为导航栏本身的全高。换句话说，让悬停效果改变导航栏整个高度的链接的背景颜色，而不是它现在创建的小框。
2. 将链接文本居中。

我不知道从哪里开始，因为我的 CSS 技能很弱，而且导航栏的东西被放置在几个不同的 CSS 类中。

我的导航栏代码目前是：

<nav id="k9nav-outer" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#k9nav-inner">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="images/k9logo.png" alt="K9SportsCenter" class="img-responsive" /></a>
        </div>

        <div class="collapse navbar-collapse" id="k9nav-inner">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Services</a></li>
                <li><a href="#">Plans</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

我当前的自定义 CSS 是：

#k9nav-outer {
    background-color: #428bca;
}

#k9nav-inner ul li:hover {
    background-color: black;
}

#k9nav-inner ul li:hover a {
    box-shadow: 0 -2px red inset;
}

#k9nav-inner ol li:active {
    background-color: black;
}

#k9nav-outer .navbar-brand,
#k9nav-inner .navbar-nav > li > a {
    color: #fff;
}

当您在他们的网站上单击“下载”时，标准 Bootstrap 3 项目会附带 CSS 的其余部分。

使用 Chrome 的开发人员工具，我看到 <li> 元素的高度为 50px。必须生成该值，因为我没有为它们指定任何特定的高度。我是否应该这样做：

.navbar li {
    height: 100%;
}

让它们随着品牌形象重新调整大小？

Answer 1

您可以将导航栏链接的line-height 更改为图片的高度。

.navbar-nav > li > a {
    line-height:100px;
}

带有图片的自定义导航栏示例：http://bootply.com/108341