Menü zentrieren

[Gast]

Mahlzeit,

ich möchte folgende Menüpunkte nebeneinander setzen und gemeinsam horizontal zentrieren:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <div class='clear'></div>
</ul>

dafür probiere ich dieses:

ul {width:100%; margin-left:auto; margin-right:auto} /* Variante 1 */  
ul {width:100%; text-align:center} /* Variante 2 */  
li {  
  display:      block;  
  float:        left;  
  margin:       0 0 0 5px;  
  padding:      2px 5px 2px 5px;  
}

Die Punkte ergeben zwar eine Zeile, kleben aber am linken Rand. margin:auto klappt wohl auch nur zusammen mit einer width-Angabe, die ist aber variabel und damit nicht bekannt.

Wie geht es richtig?

Gruß, Gast