How to center <ul> in a page?

Question

I have created ul element. These are html and css for my navigation bar:

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;

}

How can I allign this navigation bar in the center of a page?

Also, I want to ask how to make li items stay still on hover, because they move a bit to the bottom when mouse is over them. For example: http://jsfiddle.net/bufbond/uJ76F/

Answer 1

Fiddle:

http://jsfiddle.net/uJ76F/3/

just add margin auto for centering:

#list-nav {    
    margin:auto;    
}

ul#list-nav li a {
    text-align:center;
    border-width: 1px solid #000;
}
ul#list-nav li a:hover {
    color:#000;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

remove the border from hover or change color on hover.

Answer 2

you are adding border on hover. add 1px transparent border to it

ul#list-nav li a {
    border: 1px solid transparent;
}

js fiddle