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
Patricia Arquetteoriginal
2024-12-08 01:08:11737parcourir

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;
}
<div>

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!

Déclaration:
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