Dernière mise à jour le 2 février 2023 par LMD
La méthode traditionnelle pour mettre un menu à l’horizontale est de faire flotter les éléments de la liste (li). Cela rend très compliqué le centrage global du menu dans un conteneur. Pour résoudre le problème, il faut modifier le comportement des (li) par la propriété inline-block qui présente l’avantage de inline (le comportement inline place naturellement les éléments les uns à côté des autres) et certains avantages de block (permettre un dimensionnement, des marges, etc.)
Il faut donc au niveau (li) du menu, placer une propriété : display: inline-block; On peut centrer le texte dans la boîte des (li) par text-align: center dans (li). Mais surtout, il faut centrer le contenu de la liste (ul) par text-align: center; ce qui donne l’effet souhaité car cela centre les (li) compte tenu de leur comportement inline.
Vous pouvez voir le résultat avec le code css largement commenté en téléchargeant le fichier joint :