Menu midden

Ik ben een CSS lay aan het maken voor een project
alleen nu lukt het menu niet want de menuknoppen moeten in het midden staan
Hoe los ik dat op?
Code:

#menu{
        background-color: #BEDEFF;
        border-bottom: 2px solid #3388D5;
        height: 20px;
        text-align: center;
        margin: 0 auto;
    }
    #menu a{
        background-color: #3388D5;
        display: block;
        height: 20px;
        width: 100px;
        float: left;
        color: #000;
        text-align: center;
        border-right: 2px solid #BEDEFF;
    }
    #menu a:hover,#menu a:active{
        background-color: #BEDEFF;
        display: block;
        height: 20px;
        width: 100px;
        float: left;
        color: #000;
        text-align: center;
        border-right: 2px solid #3388DF;
    }

<div id="menu">
   <a href="#">lala</a>
   <a href="#">boe</a>
  </div>

De center tags om je menu heen zetten in de div.

maar het is netter met CSS...
EDIT:
en het werkt niet door float:left;

je moet er eerst een lijst van maken. vervolgens de stijl weg halen.
hier een stukje simpele code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
ul{list-style:none;}
li{float:left; width:50px;}
-->
</style></head>

<body>
<ul>
<li><a href="#">bla</a></li>
<li><a href="#">bla</a></li>
</ul>
</body>
</html>

Klopt, want je zet met float: left; alles links, en dan kan je het niet links in het midden zetten natuurlijk!

Nu krijg ik dit:
http://scription.nl/film/

dan kun je het menu ook nog naar midden brengen via margin-left:210px me te geven.
#menu ul{list-style:none; margin-left:210px;}
schuift die naar rechts

Maar het moet auto in het midden gaan staan

gewoon die float:left; wegahalen en text-align; center; voor in de plaats zetten

Nja ik heb een ander idee om de layout te doen nu