Comment centrer un menu horizontal à l'aide de flotteurs CSS et d'un 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!