Aké sú spôsoby horizontálneho zarovnania prvkov na webovej stránke?

Existuje niekoľko bežných spôsobov:

• text-align: Pre inline (inline alebo inline-block) prvky vo vnútri rodičovského bloku. Rodič musí mať text-align: center.

• margin: auto: Pre blokové (block) prvky. Prvok musí mať stanovenú šírku (width). Prehliadač automaticky rozdeľuje dostupný priestor vľavo a vpravo.

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

• Flexbox: Flexibilný systém rozloženia. Používa sa na rodičovskom kontejnery.

  .container {
    display: flex;
    justify-content: center; /* Zarovnáva prvky pozdĺž hlavnej osi (vodorovne) */
  }
  

• Grid: Dvojrozmerný systém rozloženia. Používa sa na rodičovskom kontejnery.

  .container {
    display: grid;
    justify-items: center; /* Zarovná obsah buniek horizontálne */
  }
  

• Position: absolute a transform: Pre absolútne pozicované prvky s známou šírkou.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Posunie prvok o polovicu jeho šírky doľava */
  }
  

• Display: table a margin: auto: Zriedka používané, ale možné.

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