HTML5 <nav> centering

Question

I'm going nuts a bit trying to do a website but I'm absolutely incapable of center my <nav> tag. I've read tons of threads with suggestions that involve putting in the CSS margin: 0 auto; or things like text-align: center but nothing seems to work.

I have my CSS in a separate file and so, since my CSS doesn't work at all, I'll only put the HTML here:

<nav>
    <ul class="nav nav-pills">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="jobs.html">Jobs</a></li>
        <li><a href="contactus.html">Contact us</a></li>
    </ul>
</nav>

I'm using Bootstrap as you can see, and I just want to center it.

Answer 1

Tons of ways, but here's the easiest. Three things are needed for this:

• display: block;
• width - some amount, can be percentage
• margin: auto; - the top/bottom can be whatever

Also note that <nav> defaults in browsers as a block-level element, so the first line isn't needed unless in IE 8 or below.

See example below

 nav { display: block; width: 150px; margin: 0 auto; } 

 <nav> <ul class="nav nav-pills"> <li class="active"><a href="index.html">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="jobs.html">Jobs</a> </li> <li><a href="contactus.html">Contact us</a> </li> </ul> </nav> 

Answer 2

If you're trying to do what I think you're trying to do:

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

Alternatively:

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