Welche Möglichkeiten gibt es, Elemente mit der Eigenschaft inline-block zu zentrieren?

Um Elemente mit display: inline-block zentrieren:

1. Dem Elternelement text-align: center; zuweisen. Die Kind-inline-block-Elemente werden wie Text zentriert.

   .parent {
     text-align: center; /* Zentriert inline-block-Kindelemente */
   }
   
   .child {
     display: inline-block;
   }
   

2. Die Verwendung von margin: 0 auto; auf dem inline-block-Element funktioniert nicht für horizontale Zentrierung. Diese Methode gilt für Blockelemente mit fester Breite.

3. Verschachteltes Blockelement: Wickeln Sie das inline-block-Element in ein Blockelement, dem Sie eine feste Breite (falls erforderlich) und margin: 0 auto; zuweisen.

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

   .wrapper {
     /* Keine Stile notwendig, wenn der Wrapper nur Container ist */
   }
   
   .centered-block {
     display: block; /* Wichtig, damit es ein Blockelement ist */
     width: fit-content; /* Oder eine feste Breite */
     margin: 0 auto; /* Zentriert das Blockelement */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Weitere Stile */
   }
   

Die einfachste und gängigste Methode, mehrere inline-block-Elemente horizontal zu zentrieren, ist die Verwendung von text-align: center; im Elternelement. Für die Zentrierung eines einzelnen inline-block-Elements ist es möglicherweise notwendig, es in ein Blockelement mit margin: 0 auto; einzuschließen.