Comment centrer un menu `` horizontal sans JavaScript ?

Comment centrer l'alignement horizontal

Menu sans JavaScript

Les menus horizontaux sont couramment utilisés pour afficher des liens de navigation ou de catégorie sur un site Web. L'alignement central de ces menus peut améliorer l'attrait visuel et améliorer l'expérience utilisateur. Cependant, parvenir à un alignement parfait peut s’avérer difficile. Un problème courant est que même si le menu dans son ensemble peut être centré, les éléments individuels de la liste restent alignés à gauche.

Mise en œuvre de la solution

Pour surmonter ce problème, nous pouvons utiliser le technique suivante :

1. Enroulez le
   dans un menu
   conteneur, qui servira de wrapper flottant.
   Appliquez float: left à l'élément wrapper pour l'aligner à gauche de son parent.
   Rendez le wrapper sans largeur en définissant sa propriété width sur auto.
   Utilisez position : relative et gauche : -50 % pour déplacer l'emballage vers la gauche, en le centrant efficacement horizontalement.
   Appliquer la position : relative et gauche : 50 % au
   élément dans le wrapper pour inverser la position et l'aligner sur le centre.
   • Pour garantir que les éléments de menu flottent dans le
     , définissez float: left pour le
     • éléments.

Résultat

En mettant en œuvre ces étapes, le menu horizontal sera centré horizontalement et les éléments de la liste seront alignés dans le menu. Cette technique permet le centrage sans avoir besoin de JavaScript, offrant une solution multi-navigateurs pour différents appareils et tailles d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!