Comment centrer une liste non ordonnée dans une division à largeur fixe à l'aide de CSS ?

Conception Web : centrer une liste non ordonnée dans une division à largeur fixe

Lorsque vous travaillez avec des éléments HTML, il est courant d'exiger un alignement et un dimensionnement spécifiques. Un scénario typique consiste à centrer une liste non ordonnée (

) dans un conteneur de largeur définie. Pour réaliser cette mise en page, nous pouvons exploiter la puissance du CSS :

Solution :

Pour centrer le

, tout en centrant individuellement son
• éléments, tout en assurant un ajustement dynamique de la largeur, mettez en œuvre la stratégie suivante :

  .wrapper {
      text-align: center;
  }
  
  .wrapper ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      /* Ensure compatibility with older versions of Internet Explorer */
      zoom: 1;
      *display: inline;
  }
  
  .wrapper li {
      float: left;
      padding: 2px 5px;
      border: 1px solid black;
  }

  Explication :

  1. La classe .wrapper centre l'ensemble du conteneur de liste à l'aide de texte -align: center;.
  2. Le .wrapper ul imbriqué utilise display: inline-block;, permettant le
     pour occuper uniquement l'espace nécessaire tout en conservant les propriétés en ligne. Il supprime également les marges et le remplissage par défaut pour un espacement approprié.
  3. Pour les anciennes versions d'Internet Explorer, zoom : 1 ; garantit la compatibilité entre navigateurs.
  4. *affichage : en ligne ; applique le comportement de blocage en ligne à Internet Explorer 6 et versions antérieures.
  5. Chaque
  6. l'élément est centré dans le
     en définissant float: left;. Un rembourrage et une bordure individuels sont ajoutés pour améliorer l'attrait visuel.

  Mise en œuvre :

  <div class="wrapper">
      <ul>
          <li>Three</li>
          <li>Blind</li>
          <li>Mice</li>
      </ul>
  </div>

  Remarque : Cette solution offre une largeur maximale flexibilité pour le

  car sa largeur s'ajuste dynamiquement au contenu qu'il contient.

  Mise à jour :

  Pour une démonstration pratique, visitez le lien jsFiddle fourni dans le matériel de référence.

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!