How to center navigation bar items CSS

I have a navigation bar that it spanning the entire page's width. I've also added a jQuery script so that it changes to position:fixed after scrolling for a bit, but I don't think that will influence this issue.

My issue is that I can't get the navigation bar <li>'s to center. I've tried countless things I've found on the internet, and even downloaded some templates to splice in. No luck. I'm sure I'm just missing something, but I'd like the <li>'s to go smack-dab in the middle of the navbar, but everything I've tried either makes them slightly off, floats them to the left, or makes them not resize properly.

Here's my HTML:

<!doctype html>

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="script.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>Blah blah blah</h1>

        <!--START NAVBAR-->
        <div class="nav">
            <ul>
                <li><a>Home</a></li>
                <li><a>Home</a></li>
                <li><a>Home</a></li>
            </ul>
        </div>
        <!--STOP NAVBAR-->

        <div class="content">
            <p>
            Lorem ipsum dolor sit amet...
            </p>
            <p>

            Nullam pellentesque nunc luctus...
            </p><p>
            Donec sodales fermentum orci...
            </p><p>
            Ut venenatis tellus ...
            </p><p>
            Nullam quis molestie nunc...

            </p>
        </div>

    </body>

And the CSS:

body{
background-image:url("woodPatternShadow.png");
background-size:75% auto;
padding:0;
font-family:"Verdana";
}



.nav{
height:40px;
background-color:rgba(0,0,0,0.25);
left:0;
right:0;
box-shadow: inset 0 3px rgba(255, 255, 255, 0.4), inset 0 10px 4px rgba(255, 255, 255, 0.3),inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(28,0,0,0.3);
border:1px solid rgba(0,0,0,0.1);
margin:0;
position:absolute;
}

#fixNav{
position:fixed;
top:0px;
}

.nav ul{
}

.nav ul li{
}

.nav ul li a{
}

.content{
background-color:white;
border-radius:20px;
padding:10px;
width:70%;
margin:100px auto 0;
}

The empty selectors are the places where I can't figure it out.

Can someone clear this up for me?

Solution

Set the ul to have text-align: center and set display: inline-block on the li elements.

.nav ul {
   list-style: none;
   text-align: center;
}

.nav ul li {
   display: inline-block;
}

Elements with display: inline-block are treated as inline elements even though they act like block elements in most respects, so setting text-align: center on the container will center the inline li elements inside of it.

Obviously this is a barebones functional answer - you will need to add styles to adjust presentation of the li and a elements. All this code does is remove the default bullets and centers the li elements.