inline-block мүлк колдонуп элементтерди борборго жайгаштыруу кандай жолдор менен жүргүзүлөт?

display: inline-block элементтерин борборго жайгаштыруу үчүн:

1. Ата-элементке text-align: center; белгилеңиз. inline-block балдар элементтери текст сыяктуу борборго жайгашат.

   .parent {
     text-align: center; /* inline-block балдар элементтерин борборго жайгаштырат */
   }
   
   .child {
     display: inline-block;
   }
   

2. margin: 0 auto; колдонуу иштебейт inline-block элементинде горизонталдык борборго жайгаштыруу үчүн. Бул ыкма бекитилген кеңдиктүү блок элементтерге гана ылайыктуу.

3. Ичке блок элемент: inline-block элементин, керек болсо, бекитилген кеңдик жана margin: 0 auto; менен блок элементке ороп коюңуз.

   <div class="wrapper">
     <div class="centered-block">
       <span class="inline-block-element">
          Мазмун
       </span>
     </div>
   </div>
   

   .wrapper {
     /* Эч кандай стили керек эмес, эгер ал жайгашкан контейнер гана болсо */
   }
   
   .centered-block {
     display: block; /* Бул маанилүү, блок элементи болушу керек */
     width: fit-content; /* же бекитилген кеңдик */
     margin: 0 auto; /* Блок элементти борборго жайгаштырат */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Башка стили */
   }
   

Эң жөнөкөй жана кеңири колдонулган ыкма — text-align: center; колдонуу жана анын ата-элементинде inline-block элементтерин борборго жайгаштыруу. Бир inline-block элементин борборго жайгаштыруу үчүн, аны margin: 0 auto; менен каптаган блок элементке орнотуу керек болушу мүмкүн.