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.

Answer 1

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

It should work, I tested it in your site.

Answer 2

Add some CSS:

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

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.

Answer 4

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

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.

Answer 6

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

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