Menu centré

Bonjour,
Je souhaite centrer mon menu dans une div et qu'il reste centré quand je rajoute un onglet.

Regardez ci-dessous, vous comprendrez mieux.

Mon code html

<div class="nav">
<ul class="topnav">
<li>Onglet 1</li>
<li>Onglet 2</li>
</ul>
</div>

Et voici mon css :

.nav {
position:relative;
margin:0 auto; 
width:990px; 
height: auto; 
}
.nav ul.topnav {
margin:0 auto; 
width:500px; 
}

Avec un width à 500px sur le ul, le menu est bien centré dans la div nav, cependant, lorsque je rajoute un onglet dans mon menu, et que 500 est trop petit, l'onglet descend à la ligne.
Je voudrais que le ul.topnav, reste centré dans la div nav, peut importe le nombre d'onglet et leur taille (dans la limite de 990px bien sur).
J'ai essayé de faire text-center et width:auto, mais j'y arrive pas.
Avez vous une solution pour moi ?
Merci bien

Salut,

Tu peux par exemple fonctionner avec un affichage en inline-block sur tes items de liste, puis utiliser text-align: center (et non text-center) sur l'élément ul.
Je t'ai fait un exemple rapide sur jsFiddle (en supprimant la div inutile pour cet exemple). A toi de l'adapter
Modifié par audrasjb (28 Nov 2013 - 12:54)

salut,
si tu la taille limite est 990px alors pourquoi contraindre ton <ul> à faire 500px ?