menu horizontal centré, avec float ou sans ?

Bien souvent, pour afficher des <li> en mode horizontal, on leur applique un float:left.
Malheureusement, cette méthode ne permet pas d'avoir les <li> centrés dans leur <ul>.
L'idéal serait un float:center, mais cela n'existe pas.
Nous allons donc voir comment l'émuler.

display:inline et ses contraintes

Plutôt que d'utiliser un float:left sur les li, nous allons utiliser un display:inline.
Le souci avec ce dernier est qu'il ne permet plus de contrôler ni margin-top, ni le margin-bottom (en revanche, margin-left et margin-right ne pose pas de problème).
Pour pallier à ce problème, nous devrions théoriquement utiliser line-height. Mais voila, IE6 ne le gère pas bien.
Nous allons donc utiliser une petite bidouille avec une image invisible.

Principe de l'image invisible

Il s'agit de placer dans le <li> une image a qui on spécifiera les propriétés suivante :

un height équivalent au height désiré du <li>
un width à 0 pour que l'image soit invisible
un margin-top et/ou margin-bottom, ce qui nous permettra de reprendre le contrôle perdu avec le display:inline
on n'oubliera pas le vertical-align:middle; pour que le contenu du li ne soit pas excentré.

css

img.hackImg{
	height:20px; /* hauteur d'un li */
	width:0; /* l'image ne servant qu'a émuler le margin-top et bottom, on a pas besoin de la voir*/
	vertical-align:middle; /* permettra que le contenu du li soit centré verticalement */
	margin-top:20px; /* ce margin déterminera l'écart entre 2 lignes */
}

html4strict

<li>
	<a href="#">menu 1</a>
	<img class="hackImg" src="z.gif" />				
</li>

Le code et l'exemple

Voici le code complet commenté :

css

#menu, #menu li {
		margin:0; /* reinitialise les valeurs */
		padding:0; /* reinitialise les valeurs */
	}
	#menu {
		text-align:center; /* centre les li dans ul */
	}
	#menu li {
		display:inline; /* fait en sorte que les li soit sur une seule ligne, comme avec un float */
		margin:0 10px; /* margin left et right des éléments du menu */
	}
	#menu img.hackImg{
		height:20px; /* hauteur d'un li */
		width:0; /* l'image ne servant qu'a émuler le margin-top et bottom, on a pas besoin de la voir*/
		vertical-align:middle; /* permetra que le contenu du li soit centré verticalement */
		margin-top:20px; /* ce margin déterminera l'écart entre 2 lignes */
	}

html4strict

<ul id="menu">
	<li>
		<a href="#">menu 1</a>
		<img class="hackImg" src="z.gif" />				
	</li>
	<li>
		<a href="#">menu 2</a>
		<img class="hackImg" src="z.gif" />				
	</li>
	<li>
		<a href="#">menu 3</a>
		<img class="hackImg" src="z.gif" />
	</li>
</ul>