Inline-block xususiyatidan foydalanib elementlarni markazlashtirishning qanday usullari mavjud?

display: inline-block bilan elementlarni markazlashtirish uchun:

1. Ota elementga text-align: center; ni belgilash. inline-block bolalar elementlari matn kabi markazlashtiriladi.

   .parent {
     text-align: center; /* inline-block bolalar elementlarini markazlashtiradi */
   }
   
   .child {
     display: inline-block;
   }
   

2. margin: 0 auto; ni inline-block elementiga qoʻllash ishlamaydi. Bu usul, aniq kenglikka ega boʻlgan blok elementlar uchun moʻljallangan.

3. Ichma-ich blok element: inline-block elementini, agar kerak boʻlsa, aniq kenglik va margin: 0 auto; bilan blok elementga o'rab qo'ying.

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

   .wrapper {
     /* Faqat konteyner boʻlsa, uslublar kerak emas */
   }
   
   .centered-block {
     display: block; /* Muhim, blok element boʻlishi kerak */
     width: fit-content; /* Yoki aniq kenglik */
     margin: 0 auto; /* Blok elementni markazlashtiradi */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Boshqa uslublar */
   }
   

Shunday qilib, eng oddiy va keng tarqalgan usul, text-align: center; ni ota konteynerda ishlatish va inline-block elementlarini markazlashtirishdir. Bir inline-block elementini markazlashtirish uchun, uni margin: 0 auto; bilan o'rab olgan blok elementga joylashtirish mumkin.