Centrer horizontalement un menu

[Régis]

Bonjour,

Je souhaiterai centrer horizontalement mon menu en <li> dans un <div>.

Je n'y arrive pas... si quelqu'un peut m'aider...

Merci

Le code HTML : ici et le CSS : là

[skale]

salut,

tu peux essayer le code suivant, c'est une façon de centrer la liste

@charset "iso-8859-1";

body {background-color: #336699; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0; padding: 0}
body {color: #808080; text-align: center}

#wrapper {background: #FFFFFF; width: 780px;}
#wrapper {padding: 0px; border: 0px solid #000000; margin: 10px auto;}

#menu {padding: 0px; margin: 0px; border: 0px solid #000000;}
#menu {text-align: center; background: #FFFF99; height: 24px}

#menu ul {list-style-type: none; text-align: center;}
#menu ul {padding: 0px; border: 0 solid #000000; margin: 0px;}

#menu li {display: inline;;text-align: center}
#menu li {padding: 0px; border: 0px solid #000000; margin: 0px;}

#menu a {line-height: 24px;}
#menu a {text-align: center;}
#menu a {width: auto;}
#menu a {color: #CC3300; background: #FFFFFF;}
#menu a {display: inline;}
#menu a {padding: 0px 10px 0px 10px;}
#menu a {margin: 0px 0px 0px 0px;}
#menu a {font-weight: normal; font-size: x-small; letter-spacing: 1px; text-decoration: none;}

#menu ul li a:hover {background: #CCCCCC; color: #000000}

si ça peut t'aider, tu pourras ensuite l'améliorer.

skale

Modifié 27 Mai 2005 par skale

[Régis]

Bonjour skale,

Je te remercie de ton aide.

A toute fin utile, j'ai mis ta solution en ligne : le code HTML (ici) et le CSS (là).

[campagne]

Bonjour,

je crois que ce qu'il faut dans ce cas, c'est utiliser des blocs avec

display: inline;

Plutôt que des

float: left;

qui empêchent tout centrage.

en display inline, les blocs se comportent comme du texte, donc pas besoin de spécifier une largeur et ils restent centrés.

L'avantage est aussi un inconvénient : le padding ne fonctionne pas du tout comme dans un bloc en

display: block;

dans ce cas, et la hauteur du bloc est celle du texte dans certains navigateurs...