Kādi ir veidi, kā centrēt elementus, izmantojot īpašību inline-block?

Lai centrētu elementus ar display: inline-block:

1. Uzstādiet vecāka elementa text-align: center;. Bērnu inline-block elementi tiks izlīdzināti centrā kā teksts.

   .parent {
     text-align: center; /* Centrē inline-block bērnu elementus */
   }
   
   .child {
     display: inline-block;
   }
   

2. Izmantojot margin: 0 auto; tieši uz inline-block elementa nestrādās horizontālai centrēšanai. Šī metode ir piemērojama blokiem ar fiksētu platumu.

3. Iekļauts bloka elements: Ievietojiet inline-block elementu blokā, kam ir fiksēts platums (ja nepieciešams) un margin: 0 auto;.

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

   .wrapper {
     /* Nav nepieciešami stili, ja wrapper ir tikai konteiners */
   }
   
   .centered-block {
     display: block; /* Svarīgi, lai tas būtu bloka elements */
     width: fit-content; /* Vai fiksēts platums */
     margin: 0 auto; /* Centrē bloka elementu */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Citas stila īpašības */
   }
   

Tādējādi visvienkāršākais un izplatītākais veids, kā horizontāli centrēt vairākus inline-block elementus, ir izmantot text-align: center; to vecāka konteinera stilā. Lai centrētu vienu inline-block elementu, var būt nepieciešams to ietīt blokā ar margin: 0 auto;.