Comment centrer une liste non ordonnée dans une division à largeur fixe ?

Centrage d'une liste non ordonnée (

) avec
• Éléments dans une division à largeur fixe

Le scénario consiste à centrer une liste non ordonnée (

) contenant
• éléments dans un div de largeur fixe. Pour y parvenir, nous utiliserons une combinaison d'éléments CSS et div.

  Solution

  1. Enveloppez le
     dans un div avec la classe "wrapper".

     • Appliquez les styles CSS suivants à la classe "wrapper":

       .wrapper {
           text-align: center;
       }

       Copier après la connexion

       Cela centre le div "wrapper" et aligne le

       à l'intérieur.

       • Appliquez les styles CSS suivants au

         au sein de la classe "wrapper":

         .wrapper ul {
             display: inline-block;
             margin: 0;
             padding: 0;
             /* IE support */
             zoom: 1;
             *display: inline;
         }

         Copier après la connexion

         Cela rend le

         se comporte comme un élément en ligne et lui permet de se développer dynamiquement en fonction de son contenu.

         • Appliquez les styles CSS suivants au

         • éléments dans le
            :

           .wrapper li {
               float: left;
               padding: 2px 5px;
               border: 1px solid black;
           }

           Copier après la connexion

           Cela garantit que le

           • les éléments flottent à l'intérieur du
             et sont alignés horizontalement.

  Exemple de code

  <style>
      .wrapper {
          text-align: center;
      }
      .wrapper ul {
          display: inline-block;
          margin: 0;
          padding: 0;
          zoom: 1;
          *display: inline;
      }
      .wrapper li {
          float: left;
          padding: 2px 5px;
          border: 1px solid black;
      }
  </style>
  
  <div class="wrapper">
      <ul>
          <li>Element 1</li>
          <li>Element 2</li>
          <li>Element 3</li>
      </ul>
  </div>

  Copier après la connexion

  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!