Comment centrer parfaitement un menu `` horizontal et ses éléments de liste ?

Centrage d'une image horizontale

Menu

Problème :

Un menu horizontal composé d'une liste non ordonnée (

) doit être centré dans un conteneur <div>. Tandis que les tentatives de centrer le
dans le <div> ont réussi, les éléments individuels de la liste (
• ) restent alignés à gauche dans
  .

  Solution :

  Pour obtenir un centrage parfait de les deux

  et ses éléments de liste, l'approche suivante est recommandée :
  1. Float Wrapper : Créez un wrapper float-left autour du
     et définissez sa position sur "relative" avec un décalage gauche négatif. Cela positionne le wrapper hors écran vers la gauche.
     • Élément imbriqué inversé : Positionnez l'élément
       dans le wrapper en utilisant « position : relative » et un décalage gauche positif de 50 %. Cela place le
       exactement au centre de l'emballage.
       • Éléments de la liste flottante : Ajustez la valeur
       • éléments flottant à gauche dans le
         et maintenir leur position au sein du
         en utilisant "position : relative."

  Exemple de code :

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

  Exemple HTML :

  <div>

  Avec cette implémentation, le menu sera parfaitement centré, avec les éléments de la liste répartis uniformément dans l'espace horizontal.

  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!