Care sunt modalitățile de centrare a elementelor folosind proprietatea inline-block?

Pentru centrare elementelor cu display: inline-block:

1. Atribuiți elementului părinte text-align: center;. Elementele copil inline-block vor fi aliniate în centru ca text.

   .parent {
     text-align: center; /* Centrează elementele copil inline-block */
   }
   
   .child {
     display: inline-block;
   }
   

2. Utilizarea margin: 0 auto; pe elementul inline-block nu funcționează pentru centrare orizontală. Această metodă se aplică elementelor de bloc cu lățime fixă.

3. Element de bloc imbricat: Împachetați elementul inline-block într-un element de bloc căruia îi atribuiți o lățime fixă (dacă este necesar) și margin: 0 auto;.

   <div class="wrapper">
     <div class="centered-block">
       <span class="inline-block-element">
          Conținut
       </span>
     </div>
   </div>
   

   .wrapper {
     /* Nu sunt necesare stiluri dacă wrapper-ul este doar un container */
   }
   
   .centered-block {
     display: block; /* Este important ca acesta să fie un element de bloc */
     width: fit-content; /* Sau o lățime fixă */
     margin: 0 auto; /* Centrează elementul de bloc */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Alte stiluri */
   }
   

Așadar, cea mai simplă și comună metodă de a centra mai multe elemente inline-block pe orizontală este utilizarea text-align: center; pe containerul părinte. Pentru a centra un singur element inline-block, poate fi necesar să îl înfășurați într-un element de bloc cu margin: 0 auto;.