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

Question

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

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

我想做两件事：

1. 使导航栏<li>中的<ul>元素的高度为导航栏本身的整个高度。换句话说，使悬停效果改变导航栏整个高度的链接背景颜色，而不是现在创建的小框。
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;
}

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

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

.navbar li {
    height: 100%;
}

要让它们与品牌形象一起重新调整大小？

Answer 1

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

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

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