Créer un menu horizontal centré en CSS (sans JavaScript)

C’est une chose qui peut paraître très simple à faire, mais sur laquelle beaucoup de personnes se sont cassés les dents.
Aujourd’hui encore je trouve des solutions en JavaScript qui permettent d’attribuer une marge à gauche de l’élément ul pour centrer les li qu’il contient.
Voyons en quelques lignes de CSS comment faire fonctionner un centrage de liens dans un menu horizontal sur tous les navigateurs.

Solution avec li en inline

Vous savez sous doute que l’affichage des éléments de liste se fait par défaut en display: list-item;, qui procure à la liste ce comportement particulier, notamment l’attribution de puces de liste.
Grâce à CSS, nous allons redéfinir cette propriété par défaut en passant sa valeur à inline.

Considérons le code HTML suivant :

<ul id="nav"><!--
	--><li><a href="#">Accueil</a></li><!--
	--><li><a href="#">Services</a></li><!--
	--><li><a href="#">À propos</a></li><!--
	--><li><a href="#">Contact</a></li>
</ul>

Les commentaires HTML entre chaque élément de liste permettent de supprimer l’espace blanc (white-space) indésirable, visible sur certaines mises en forme.

Il nous faut maintenant simplement annuler les styles par défaut de la liste pour obtenir des liens alignés sans puce de liste.

#nav {
	padding: 0; margin: 0;
}
#nav li {
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
}

Inline suffit pour la plupart des navigateurs, mais IE7 a tout de même besoin que la valeur list-style soit à none pour que la suppression des puces soit effective.

Avec cela, nos liens sont collés, et surtout le texte est aligné à gauche.
Il nous faut donc compléter notre code pour corriger l’alignement et l’espacement des liens.

#nav {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
#nav li {
	display: inline;
	list-style: none;
}
#nav a {
	display:inline-block;
	margin: 0 30px;
}

La ligne 2 nous permet d’annuler les marges par défaut de la liste. La Ligne suivante (3) permet de centrer nos éléments de liste maintenant tous alignés. Les dernières déclarations (lignes 9 à 12) ajoutent de l’espace entre les liens.

Démonstration simple Démonstration stylée

Solution avec li en inline-block

Pourquoi proposer cette deuxième solution ?

1. inline-block est trop peu connu
2. inline-block permettrait d’ajouter des effets supplémentaires autour des liens
3. ça ne change pas grand chose à votre code

Le code HTML ne change pas, et le code CSS non plus, hormis la ligne 6 du code précédent, où il vous suffit de remplacer inline par inline-block.
Le seul souci que l’on va avoir c’est un problème de compatibilité avec IE. Pour cela, je vous renvoie sur l’article du blog, si vous ne l’avez pas déjà lu :
Display : inline-block, une valeur trop peu utilisée

Le comportement est quasiment identique qu’avec la valeur inline, la différence étant la possibilité de redimensionner l’élément et de lui appliquer des styles applicables à des éléments de type block.

Si vous avez des questions l’espace de commentaires est là pour vous 😉