Centrer un menu horizontal sans width

Bonjour,

Je suis en train de bloquer sur mon menu sur lequel je n'arrive pas à centrer son contenu.

CSS :

#bg_menus
{
	background-image: url("./images/bg_menu.png");
	background-repeat: repeat-x;
}

ul#menus
{
	height: 26px;
	font-size: 14px;
	color: white;
	padding-top: 3px;
	margin: auto;
	-width: 452px;
}

ul#menus li
{
	list-style-type: none;
	float: left;
	margin: 0 1em 0 1em;
	-width: 113px;
	-margin: 0;
}

ul#menus li a
{
	display: block;
	height: 20px;
	padding: 3px 15px 0 15px;
	color: white;
	text-decoration: none;
}

ul#menus li a:hover
{
	text-decoration: underline;
	background-image: url("./images/bg_menu_hover.png");
	background-repeat: repeat-x;
}

HTML :

		<div id="bg_menus">
			<ul id="menus">
				<li><a href="./index.html">Accueil</a></li>
				<li><a href="./index.html">Portfolio</a></li>
				<li><a href="./index.html">À propos</a></li>
				<li><a href="./index.html">Contact</a></li>
			</ul>
		</div>

Résultat : http://abdel.e3b.org/decoupe20/

Comment faire pour centrer le contenu de ce menu sans forcément indiquer une largeur ?

Merci.
Modifié par Abdel (29 Jun 2009 - 18:31)

Bonjour,

1. En alignant les items du menu avec du display:inline plutôt que du float:left. Peut être limité pour donner des dimensions (hauteur notamment) aux éléments du menu.
2. En alignant les items du menu avec du display:inline-block plutôt que du float:left.
3. En utilisant du display:table sur le conteneur (UL) et des marges automatiques.

Je te recommanderais plutôt la numéro 2. Pour que ça marche sous IE 6-7, il faudra à priori utiliser du display:inline pour les LI, et du display:inline-block pour les A.