Какви са начините за центриране на елементи с използване на свойството 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;
     /* Други стилове */
   }
   

Най-простият и разпространен начин за центриране на няколко inline-block елемента по хоризонталата е използването на text-align: center; на техния родителски контейнер. За центриране на един inline-block елемент може да е необходимо да го обвиете в блоков елемент с margin: 0 auto;.