Centrer un menu <ul>

ul {
  display: block; // peut être utile pour le centrage avec des marges latérales à 'auto'
  margin: 0 auto; // marges haut / bas à '0' (par exemple) et gauche / droite à 'auto'
  }

Ainsi, il sera centré dans ta box.. Après, ce n'est qu'une piste et en CSS il faut parfois bidouiller, vu que tous les objets sont plus ou moins interdépendants  .

Mais le mieux reste de mettre ta liste <ul> dans une box <div> qui, elle, se chargera du centrage.. Vu que le <div> est un conteneur "générique" qui peut se comporter autant en 'display: bloc' qu'en 'display: inline'.. Sans compter que ça passera bien mieux côté validité du code : <ul> n'est pas "naturellement" un conteneur à son sens direct : c'est plutôt un délimiteur, un peu comme d'autres du style <a>, <form> etc.....

Code XHTML :

<div>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

CSS correspondante :

div {  // ici, c'est le <div> qui "porte" le centrage
  display: block;
  margin: 0 auto;
  width: xxxx; // la largeur voulue pour ta liste <ul>
  }

Il n'y a que l'ancien IE 5.x qui ne sait pas gérer ce type de centrage et qui applique l'alignement du texte à tout contenu (parfois très marrant !).. Mais IE 5.x est en passe de devenir franchement marginal et ne reste en vigueur que sur des ordis qui n'ont pas effectué la mise à niveau vers IE 6 (dans certaines entreprises chez lesquelles certaines applis "maison" ne sont pas toujours certifiées 100% OK avec IE 6, par exemple : quelques antiques postes sous Win98 ou des plus récents le plus souvent avec Win2000pro ; beaucoup moins chez les particuliers qui, même avec Win98 ou Me, appliquent Windows Update le plus souvent de manière automatique)..

 

L'ajout de "auto" ne fonctionne pas. Je t'explique: mon menu <ul> est contenu dans une boite <div id="menu"> et dont voici le code.

#menu {
	margin: 0;
	padding: 3px 0 0 0;
	width: 100%;
	height: 22px;
	color: 3FFF;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
	liste-style-type: none;
	border-bottom: 1px solid #000;
	background: #F00;
}
 
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
}
 
#menu li {
	margin: 0;
	padding: 0;
	width: 9em;
	float: left;
	text-align: center;
	list-style-type: none;
}
 
#menu ul li {
	margin: 0 1em 0 0;
	padding: 0;
	color: #FFF;
	float: left;
	text-align: center;
	background: #F00;
}
 
#menu ul li ul {
	margin: 0;
	padding: 0;
	width: 9em;
	position: absolute;
	list-style-type: none;
	display: none;
}
 
#menu ul li ul li {
	margin: 0;
	padding: 0 1px 0 0;
	width: 9em;
	display: block;
	list-style-type: none;
	background: #F00;
}
 
#menu ul li:hover ul {
	display: block;
}
 
#menu ul li:hover ul, #menu ul li ul:hover {
	display: block;
}
 
#menu a, #menu a:active, #menu a:visited {
	margin: 0;
	padding: 0;
	display: block;
	width: 9em;
	color: #FFF;
	text-decoration: none;
	height: 17px;
	border: 1px solid #FFF;
}
 
#menu a:hover {
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #000;
	background: #FFF;
	border: 1px solid #000;
}

Ou est mon erreur?

J'en ai oublié un morceau : pour que le paramètre 'auto' fonctionne avec l'attribut 'margin', il faut que le conteneur et l'objet contenu aient chacun des dimensions latérales définies, ou au moins l'objet contenu et que sa largeur soit inférieure à celle de son conteneur.. Sinon, le contenu prend la largeur du conteneur, c'est le principe de l'héritage des propriétés..

Et gare aux 'margin: 0;' qui se promènent ici et là : en plus du principe de l'héritage, les règles CSS sont additives et un objet peut être défini à travers autant de règles et de feuilles CSS qu'il peut parfois être nécessaire.. Dans tes règles CSS, tu en as 2 qui risquent d'être en conflit : #Menu li et #Menu ul li. C'est à priori le même objet, puisqu'un <li> ne peut être contenu que dans un <ul> ou un <ol>..

De plus, la règle 'float' ne permet aucun centrage ou autre : elle "retire" l'objet du flux principal (comme le ferait 'position: absolute;') et le colle sans conditions à gauche ou à droite.. La règle 'margin' fonctionne, mais pas le paramètre 'auto'.. Le truc "en plus" du 'float' sur le 'position: absolute;', c'est que le 'float' provoque le décalage du contenu voisin dans la box.. Pour le reste, il se comporte pareil..

Mais comme 'float' est de la famille des 'position: absolute;', son abus pour du positionnement peu provoquer des misères au niveau de la hauteur du bloc conteneur : si le contenu dans le flux "normal" est insuffisant et que le conteneur n'a pas de hauteur définie (recommandé pour des blocs adaptables au contenu), l'objet en 'float' va dépasser du conteneur et les objets qui suivent ce conteneur seront de toutes façons positionnés par rapport au conteneur, ignorant le 'float'.. Sauf que IE ne fait pas tout à fait ça : il n'isole pas complètement le 'float' comme le veut la recommendation CSS.. Le soucis est flagrant avec tous les navigateurs respectueux des recommendations..

Donc, pour ton <ul>, essaie de ne pas mettre pas de règle 'float' et essaie le 'margin: 0 auto;' à la place..