Quelles sont les méthodes pour centrer des éléments en utilisant la propriété inline-block?

Pour centrer des éléments avec display: inline-block :

1. Appliquez text-align: center; à l'élément parent. Les éléments enfants inline-block seront alignés au centre comme du texte.

   .parent {
     text-align: center; /* Centre les éléments enfants inline-block */
   }
   
   .child {
     display: inline-block;
   }
   

2. L'utilisation de margin: 0 auto; sur l'élément inline-block lui-même ne fonctionne pas pour le centrage horizontal. Cette méthode s'applique aux éléments de bloc avec une largeur fixe.

3. Élément de bloc imbriqué : Enveloppez l'élément inline-block dans un élément de bloc auquel vous attribuez une largeur fixe (si nécessaire) et margin: 0 auto;.

   <div class="wrapper">
     <div class="centered-block">
       <span class="inline-block-element">
          Contenu
       </span>
     </div>
   </div>
   

   .wrapper {
     /* Pas besoin de styles si le wrapper est simplement un conteneur */
   }
   
   .centered-block {
     display: block; /* Important que ce soit un élément de bloc */
     width: fit-content; /* Ou une largeur fixe */
     margin: 0 auto; /* Centre l'élément de bloc */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Autres styles */
   }
   

Ainsi, la méthode la plus simple et courante pour centrer plusieurs éléments inline-block horizontalement est d'utiliser text-align: center; sur leur conteneur parent. Pour centrer un seul élément inline-block, il peut être nécessaire de l'envelopper dans un élément de bloc avec margin: 0 auto;.