CSS - How do I position my 'a' element text in a Bootstrap navbar?

Question

I am trying to position my a element text inside of a Bootstrap navbar but, so far, I have achieved an a element with 15px padding on all sides and a height of 0.

I am trying to implement a 'tabs bar' where a new tab is created every time a user clicks on an option in a separate navbar, so the li and a elements for the tab are added dynamically using JQuery.

Here is the code:

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;
}

Here is a picture of the result:

I want the text to centered horizontally and vertically in the box, and the box to be sitting on the bottom of the bar.

Thanks in advance for any help!

Answer 1

Too much CSS code and actually those heights and widths properties are the problem, especially this line: min-height: 30px !important;, which gives the nav exactly a height of 30px, because your nav is empty.

Try this:

.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;
}

This is the result tested in chrome and firefox