CSS - 如何在Bootstrap导航栏中定位'a'元素文本？

Question

我正在尝试将a元素文本放在Bootstrap navbar中，但到目前为止，我已经实现了一个a元素，所有元素的边长为15px，高度为0

我正在尝试实施“标签栏”，每次用户点击单独导航栏中的选项时都会创建新标签页，因此标签的li和a元素为使用JQuery动态添加。

以下是代码：

HTML：

@* Navbar -- Tabs Bar *@
<nav class="navbar tabsBar">
    <div class="container-fluid">
        <ul class="nav navbar-nav tabbar-nav">

        </ul>
    </div>
</nav>

JQuery的：

$(".btnSwitchView a").click(function () {
    var tabName = $(this).data("name");
    var newTab = "<li id='" + tabName + "' class='tab'><a href='#'>" + tabName + "</a></li>";
    $(".tabbar-nav").append(newTab);
})

CSS：

.tabsBar {
    background-color: gray;
    margin-bottom: 2em;
    min-height: 30px !important;
}

.tabbar-nav {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.tab {
    display: block;
    margin-right: .7em;
    width: 10%;
    height: 100%;
    background-color: #222222;
    text-align: center;
}

.tab a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 0px;
    color: gray;
}

以下是结果图：

我希望文本在框中水平和垂直居中，并且框要位于栏的底部。

提前感谢您的帮助！

Answer 1

太多的CSS代码，实际上那些高度和宽度属性是问题所在，尤其是这一行：min-height：30px！important;，这使导航器的高度达到30px，因为导航栏是空的。

试试这个：

.tabsBar {
    background-color: gray;
    margin-bottom: 2em;
}

.tabbar-nav {
    position: absolute;
    display: block;
    bottom: 0;
}

.tab {
    margin-right: .7em;
    background-color: #222222;
    text-align: center;
}

.tab a {
    color: gray;
}

这是在chrome和firefox中测试的结果