How do I Vertically Center Text in My Navigation Bar?

HTML:

<body>
    <div class = "container">
        <div class = "nav">
            <ul class = "pull-left">
                <li><a class = "brand" href = "/">New York Guide</a></li>
            </ul>

            <ul class = "pull-right">
                <li><a href = "#">Sign Up</a></li>
                <li><a href = "#">Log In</a></li>
                <li><a href = "#">Help</a></li>
            </ul>       
        </div>
    </div>
</body>

CSS:

.nav li {
    display: inline;
}

.nav a {
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav {
    background-color: #7f7f7f;
}

Currently, my navigation bar's text is close to the top of the gray bar. Is there any way to center it vertically in the bar?

Do I need to use padding or margin tags? Or something else entirely?

Solution

Your UL elements have an added margin-bottom property generated by bootstrap. Target your ULs and reset the margin to 0.

.nav ul{margin:0;}

Also, fix padding of your Links to be equal and make them display as inline-block:

.nav a {padding: 10px 10px; display:inline-block;}

Working example