Li en ligne et centré

Bonjour je voudrais crééer un menu avec une liste (li).
Je voudrais que ce menu soit en ligne, centré avec pour chaque élement un margin de 10px (sur les cotés et en hauteur).
J'ai essayé plusieurs méthodes mais aucunes ne fonctionne comme je le voudrais.
J'ai notemment essayé de mettre mes LI en display:inline. Mais lorsque le nombre de mes menus est trop grand ça passe à la ligne (jusque là c'est logique) mais le margin-top n'ai pas pris en compte.

J'ai ensuite essayé en mettant mes li en float:left; mais impossible de les centrer dans ce cas...

Voici mon code html

<div id="sCat">
<ul>
<li>
    cat 1
</li>
<li>
  cat 2
</li>
<li>
   cat 3
</li>
</ul>
</div>

La version float

#sCat {
text-align:center;
width:732px;
overflow:auto;
}
#sCat ul {
margin:0;
padding:0;
}
#sCat li {
float:left;
list-style-type:none;
margin:10px;
}

Bonjour,

Les marges verticales ne peuvent être appliquées à des éléments de type inline. Par contre, tu pourras jouer sur des padding qui, eux, sont parfaitement fonctionnels.

Dans l'idéal il faudrait utiliser display: inline-block, mais en l'absence d'un support correct par les principaux navigateurs il va falloir se rabattre sur du display: inline.

Donc: padding de 10px sur les li, et peut-être placer un élément span dans chaque li si on a besoin de donner une mise en forme particulière au contenu.

Malheureusement j'ai tester avec des padding et ca ne fonctionne pas comme je le voudrait. Le li se retrouve plus grand mais je n'ai pas plus d'espace entre mes 2 lignes.

Mais à force de chercher et avec l'aide d'un amis on à trouver une solution qu'on à explicité ici:
Centrer des Li en ligne