Center text on Navbar

[tannercurey]

I just can't figure out how to get my link buttons on the navbar "Home, About, Contact" to be on the center of the Navbar below the page title. I've tried to center everything with my CSS style page for the navbar and i've ever tried to simply use "center" but nothing seems to work. Anybody have any ideas?

Here's my page

[MarkLannen]

I don't know if this will work, but I set a width at 100%, and then used the following css for the nav items.

{margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;}

Shorthand for this would be: {margin: 0 auto;}

Assuming you don't need a top or bottom margin (you can change that if needed), auto for left and right should center the menu items.

Let me know if this helps!

[tannercurey]

Thanks for the help Mark, I appreciate your time. I finally got around to trying this but still can't quite figure it out. I'm not unhappy with the way my navbar looks so it's not a major issue right now, I was mostly just curious how I could center the text on it.

[JustineEvansUM]

Hey @tannercurey! Awesome site. You need to move some information around. You actually have a wayward float value that's giving you headaches.

Remove the float from your li {} attributes, and attach a display: inline-block to get a similar appearance, but with better control:

li {
    /*float: left;*/
    text-align: center;
    display: inline-block;
}

li a {
    display: inherit;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

Try it and let me know what happens!

[tannercurey]

Awesome! Thank you @JustineEvansUM, that worked perfectly! Now that's what I was going for, I appreciate it!

[JustineEvansUM]

Fantastic! Glad it worked!