Maison > interface Web > tutoriel CSS > Comment centrer un menu horizontal à l'aide de flotteurs CSS et d'un wrapper ?

Comment centrer un menu horizontal à l'aide de flotteurs CSS et d'un wrapper ?

Patricia Arquette
Libérer: 2024-12-08 01:08:11
original
758 Les gens l'ont consulté

How to Center a Horizontal `` Menu Using CSS Floats and a Wrapper?

Centrage d'une image horizontale
    Menu

Défis rencontrés

En essayant d'aligner au centre un menu horizontal en utilisant une combinaison de bloc en ligne, de bloc et d'alignement central, le résultat souhaité est resté insaisissable.

Solution proposée à partir du Web

Une ressource (http://pmob.co.uk/pob/centred-float.htm) propose une méthode qui implique un élément wrapper flottant à gauche et décalé hors écran vers la gauche, accompagné d'un élément interne flottant à droite.

#buttons {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}

#buttons ul {
  list-style: none;
  position: relative;
  left: 50%;
}

#buttons li {
  float: left;
  position: relative;
}

#buttons a {
  text-decoration: none;
  margin: 10px;
  background: red;
  float: left;
  border: 2px outset blue;
  color: #fff;
  padding: 2px 5px;
  text-align: center;
  white-space: nowrap;
}
Copier après la connexion
<div>
Copier après la connexion

Conclusion

Le code fourni centre efficacement le

    menu dans le DIV, en déplaçant les éléments de la liste au centre de l'espace disponible. Cependant, cette approche ne concerne pas le centrage des éléments de liste eux-mêmes dans la zone
      élément. Pour cela, JavaScript peut être requis.

      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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal