CODEWITHSUNDEEP
htmlcsscenternavbar
CoderBryan
CoderBryan

Reputation: 2737

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?

Upvotes: 6

Views: 20875

Answers (3)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use vertical-align:middle.

.nav a {
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
    vertical-align:middle;
     display: inline-block;
}

add reset too

.nav ul{margin:0;}

Upvotes: 1

user3856275
user3856275

Reputation:

It is centred vertically but there is no padding. You can add space by adding padding to .nav

.nav {
    background-color: #7f7f7f;
    padding: 10px 0;
}

Upvotes: 0

IndieRok
IndieRok

Reputation: 1788

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

Upvotes: 7

Related Questions