How to center a navigation bar using CSS or HTML?

Question

I'm having difficulty centering the navigation bar on this page .

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

Answer 1

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

It should work, I tested it on your site.

Answer 2

Add CSS:

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

Answer 3

If you have your <ul> navigation system with class #nav then you need to put this <ul> element in the div container. Make your container div 100% wide. and set the text-align: center element to a value in the div container. Then in <ul> set 3 separate elements for this class: text-align: center; position: relative; and display: built-in unit;

which should center it.

Answer 4

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

Answer 5

The best way to fix this is I was looking for a code or a trick how to focus the navigation menu and found real solutions that it works for all browsers and for my friends;)

Here is how I did it:

 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 don't forget to install doctype html5

Answer 6

I focused it by doing the following:

 #nav { position: relative; left: 175px; } 

This would be the easiest way to do this (it might take longer if you don't have firebug or another web debugger.