CSS-Problem z automatycznym wyśrodkowaniem menu

[andrzolide]

Kod:

#menu{
height:35px;
}

#menu ul{
margin-top:30px;
list-style:none;
display:block;
width:auto;
}

#menu ul li{
float:left;
font-size:19px;
font-family:georgia;
font-variant:small-caps;
padding:0 30px 0 30px;
}

#menu ul li a{
text-decoration:none;
color:#dba963;
}


<div id="menu">
<ul>
    <li><a href="index.html">Witamy</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="lokalizacja.html">Lokalizacja</a></li>
    <li><a href="galeriaindex.html">Galeria</a></li>
</ul>
</div>

Teraz moje pytanie brzmi: Jak wyśrodkować to menu? Mógłbym po prostu nadać width dla menu a potem wyśrodkować czy cos takiego, ale gdy w innym pliku html dodam jeszcze kilka "li" to co? Nie chce tworzyć kolejnych linijek styli dla każdego pliku html.

Może ktoś powie jak zrobić by szerokość diva dostosowywała się automatycznie do szerokości tego co jest w środku? Próbowałem width 100% ale nie działa...

[Kartofelek]

display:inline-block; *display:inline (to drugie dla ie7)

[andrzolide]

Dzięki o to mi chodziło