Как центрировать <ul> на странице?

Я создал элемент ul. Это html и css для моей панели навигации:

Html:

 <ul id="list-nav">
    <li><a href="Marsrutas.html">Item1</a>
    </li>
    <li><a href="Nuotraukos.html">Item2</a>
    </li>
    <li><a href="Apie zygi.html">Item3</a>
    </li>
    <li><a href="Apie mane.html">Item4</a>
    </li>
    <li><a href="Dviraciai.html">Item5</a>
    </li>
    <li><a href="Kontaktai.html">Item6</a>

CSS:

    ul#list-nav {
  margin:40px;
  padding:0;
  list-style:none;
  width:525px;
}

ul#list-nav li {

  display:inline
  text-align: center;

}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:65px;

 color:#eee;
 float:left;
 margin:5px;
}

ul#list-nav li a {
  text-align:center;

}

ul#list-nav li a:hover {
  color:#000;
   border-width: 1px;
 border-style: solid;
 border-color: #FFFFFF; 
 -moz-border-radius: 5px;
border-radius: 5px;

}

Как я могу привязать эту панель навигации в центре страницы?

Кроме того, я хочу спросить, как заставить элементы li оставаться на месте, поскольку они перемещаются немного вниз, когда мышь над ними. Например: http://jsfiddle.net/bufbond/uJ76F/