Kokios yra būdai horizontaliai išlyginti elementus interneto puslapyje?

Yra keletas dažniausiai naudojamų būdų:

• text-align: Inline (inline arba inline-block) elementams tėviniame bloke. Tėvas turi turėti text-align: center.

• margin: auto: Blokiniams (block) elementams. Elementas turi turėti nustatytą plotį (width). Naršyklė automatiškai paskirsto prieinamą erdvę kairėje ir dešinėje.

  .element {
    width: 200px;
    margin: 0 auto;
  }
  

• Flexbox: Lankstus išdėstymo sistema. Taikoma tėviniam konteineriui.

  .container {
    display: flex;
    justify-content: center; /* Išlygina elementus pagal pagrindinę ašį (horizontaliai) */
  }
  

• Grid: Dviejų matmenų išdėstymo sistema. Taikoma tėviniam konteineriui.

  .container {
    display: grid;
    justify-items: center; /* Išlygina langelių turinį horizontaliai */
  }
  

• Position: absolute ir transform: Absoliučiai pozicionuotiems elementams su žinomu plotu.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Perkelia elementą per pusę jo pločio į kairę */
  }
  

• Display: table ir margin: auto: Retai naudojama, bet įmanoma.

  .element {
    display: table;
    margin: 0 auto;
  }