How to center a navigation bar with CSS or HTML?

Question

I am having difficulty with centering the navigation bar on this page.

I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it.

Bent

What exactly do you mean by "centering this navigation bar"? – Invigilate

It is centred. It's just that the child elements aren't. – Karlise

@David Thomas - So the child element is causing the main nav not to be centered? – Bent

No, because you can't see the background-color of the menu, the children are causing the menu to look not to be centred. Add a background-color to the menu and it seems to be fine. – Karlise

Answer 1

#nav ul {
    display: inline-block;
    list-style-type: none;
}

It should work, I tested it in your site.

Cozen

I tested it in your site using Firebug and it worked. I can show you a screen capture :) – Cozen

Actually, it works adding only display: inline-block;. I tested it again. – Cozen

@Cozen - any ideas on how to get the child element to line up with the main one? – Bent

@Cozen - yes, contest has a child element – Bent

What has inline-block to do with centering? A bit absurd that it works. But it does. – Photoperiod

Answer 2

Add some CSS:

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}

Dory

Anyway to get the child element to align with the word above? – Bent

You can set ´text-align: left´ on your child element. – Dory

Answer 3

If you have your navigation <ul> with class #nav Then you need to put that <ul> item within a div container. Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block;

that should center it.

Amarillo

Answer 4

Just add :

*{
    margin: 0;
    padding: 0;
}

nav{
    margin: 0 auto;
    text-align: center;
}

Goldsmith

Answer 5

Your nav div is actually centered correctly. But the ul inside is not. Give the ul a specific width and center that as well.

Sort

Answer 6

The best way to fix it I have looked for the code or trick how to center nav menu and found the real solutions it works for all browsers and for my friends ;)

Here is how I have done:

body {
    margin: 0;
    padding: 0;
}

div maincontainer {
    margin: 0 auto;
    width: ___px;
    text-align: center;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin-left: auto;
    margin-right: auto;
}

and do not forget to set doctype html5

Recapitulation

Answer 7

You could also use float and inline-block to center your nav like the following:

nav li {
   float: left;
}
nav {
   display: inline-block;
}

Deadly