Quali sono i metodi per centrare gli elementi usando la proprietà inline-block?

Per centrare gli elementi con display: inline-block:

1. Imposta text-align: center; sull'elemento genitore. Gli elementi figli inline-block saranno allineati al centro come il testo.

   .parent {
     text-align: center; /* Centra gli elementi figli inline-block */
   }
   
   .child {
     display: inline-block;
   }
   

2. L'uso di margin: 0 auto; sull'elemento inline-block non funziona per il centramento orizzontale. Questo metodo si applica agli elementi di blocco con larghezza fissa.

3. Elemento di blocco annidato: Avvolgi l'elemento inline-block in un elemento di blocco a cui assegni una larghezza fissa (se necessario) e margin: 0 auto;.

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

   .wrapper {
     /* Non sono necessari stili se il wrapper è solo un contenitore */
   }
   
   .centered-block {
     display: block; /* È importante che sia un elemento di blocco */
     width: fit-content; /* O una larghezza fissa */
     margin: 0 auto; /* Centra l'elemento di blocco */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Altri stili */
   }
   

Quindi, il modo più semplice e comune per centrare più elementi inline-block orizzontalmente è usare text-align: center; sul contenitore genitore. Per centrare un singolo elemento inline-block, potrebbe essere necessario avvolgerlo in un elemento di blocco con margin: 0 auto;.