Aké spôsoby existujú na centrovanie prvkov pomocou vlastnosti inline-block?

Na centrovanie prvkov s display: inline-block:

1. Nastavte na rodičovskom prvku text-align: center;. Deti prvky inline-block budú zarovnané na stred ako sú textom.

   .parent {
     text-align: center; /* Centrovanie detí s inline-block */
   }
   
   .child {
     display: inline-block;
   }
   

2. Použitie margin: 0 auto; na samotnom inline-block prvku nefunguje na horizontálne centrovanie. Tento spôsob je vhodný pre blokové prvky s pevnou šírkou.

3. Vnorený blokový prvok: Obalte inline-block prvok do blokového prvku, ktorému priradíte pevnú šírku (ak je potrebné) a margin: 0 auto;.

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

   .wrapper {
     /* Nie je potrebné štýly, ak je wrapper len kontajner */
   }
   
   .centered-block {
     display: block; /* Dôležité, aby to bol blokový prvok */
     width: fit-content; /* Alebo pevná šírka */
     margin: 0 auto; /* Centrovanie blokového prvku */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Iné štýly */
   }
   

Najjednoduchší a najbežnejší spôsob, ako horizontálne centrovať viac inline-block prvkov, je použiť text-align: center; na ich rodičovskom kontejnere. Pre centrovanie jedného inline-block prvku môže byť potrebné ho obaliť do blokového prvku s margin: 0 auto;.