Koje su metode za centriranje elemenata koristeći svojstvo inline-block?

Za centriranje elemenata sa display: inline-block:

1. Postavite text-align: center; na roditeljskom elementu. Deca elementi inline-block će biti poravnati na sredinu kao tekst.

   .parent {
     text-align: center; /* Centriranje inline-block dece */
   }
   
   .child {
     display: inline-block;
   }
   

2. Korišćenje margin: 0 auto; na samom inline-block elementu ne radi za horizontalno centriranje. Ova metoda je primenjiva na blok elementima sa fiksnom širinom.

3. Ugnježdeni blok element: Omotajte inline-block element u blok element kojem dodeljujete fiksnu širinu (ako je potrebno) i margin: 0 auto;.

   <div class="wrapper">
     <div class="centered-block">
       <span class="inline-block-element">
          Sadržaj
       </span>
     </div>
   </div>
   

   .wrapper {
     /* Nije potrebno stilove ako je wrapper samo kontejner */
   }
   
   .centered-block {
     display: block; /* Važno je da bude blok element */
     width: fit-content; /* Ili fiksna širina */
     margin: 0 auto; /* Centriranje blok elementa */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Ostali stilovi */
   }
   

Najjednostavniji i najčešće korišćen način za horizontalno centriranje više inline-block elemenata je korišćenje text-align: center; na roditeljskom kontejneru. Za centriranje jednog inline-block elementa, možda će biti potrebno da ga obmotate u blok element sa margin: 0 auto;.