Milyen módszerek léteznek az elemek középre helyezésére az inline-block tulajdonság használatával?

Az display: inline-block elemek középre helyezéséhez:

1. Állítsa be a szülőelemre a text-align: center; értéket. Az inline-block gyerek elemek szövegként lesznek középre igazítva.

   .parent {
     text-align: center; /* Középre igazítja az inline-block gyerekeket */
   }
   
   .child {
     display: inline-block;
   }
   

2. Az margin: 0 auto; használata nem működik az inline-block elemeken a vízszintes középre helyezéshez. Ez a módszer csak fix szélességű blokk elemekre alkalmazható.

3. Beágyazott blokk elem: Csomagolja az inline-block elemet egy blokk elembe, amelynek adott fix szélességet (ha szükséges) és margin: 0 auto; értéket ad.

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

   .wrapper {
     /* Nincs szükség stílusokra, ha a wrapper csak konténer */
   }
   
   .centered-block {
     display: block; /* Fontos, hogy blokk elem legyen */
     width: fit-content; /* Vagy fix szélesség */
     margin: 0 auto; /* Középre helyezi a blokkot */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Egyéb stílusok */
   }
   

A legegyszerűbb és leggyakoribb módszer több inline-block elem vízszintes középre helyezésére az, ha a szülő konténeren text-align: center;-t alkalmazunk. Egy inline-block elem középre helyezéséhez pedig szükség lehet arra, hogy egy blokk elembe csomagoljuk, amelynek margin: 0 auto;-t adunk.