How to center a navigation bar with CSS or HTML?

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.

4

7 Answers

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

It should work, I tested it in your site.

5

Add some CSS:

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

2

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.

0

Just add :

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

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

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

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

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy