Kann mir da jemand weiterhelfen? Wo finde ich Information wie ich Listen richtig Formatiere?

Zz. will ich meine Liste in die Mitte Der Webseite stellen aber irgend wie klappt das nicht wie ich mir das Vorstelle.
So sieht meine Liste aus:
HTML-Code: 
<div id="head_navi">
	<ul id="navi">
		<li><a href="">Hauptseite</a></li>
		<li><a href="">Mitspieler</a></li>
		<li><a href="">Karte</a></li>
		<li><a href="">Login</a><div></div></li>
	</ul>
</div>
und so die CSS befehle dazu:
HTML-Code: 
div#head_navi{
	width: 700px;
	margin: 1em auto; padding: 0;
	text-align: center;
}

ul#navi{
	margin: 1em auto; padding: 0;
}
ul#navi li{
	list-style: none;
	display: inline;
}
ul#navi a {
	border: 2px solid #000000;
	background-image: url(image/head_navi_back.png);
	float: left; width: 100px;
        margin: 0.5em; padding: 0.5em;
        text-decoration: none;
}
ul#navi a:hover {
	border: 2px solid #000000;
        background-image: url(image/head_navi_back2.png);
        margin: 0.5em; padding: 0.5em;
        text-decoration: none;
}
ul#navi div {
	clear: left;
}
Irgend wie steh ich aufn schlau. xD
Bisher hab ich alles immer noch irgendwie hinbekommen aber ich hab kein Bock mehr so lange rum zu spielen bis es geht. -.-
Hat jemand gute Informationen fuer mich?