Jaké jsou způsoby horizontálního zarovnání prvků na webové stránce?

Existuje několik běžných způsobů:

• text-align: Pro řádkové (inline nebo inline-block) prvky uvnitř rodičovského bloku. Rodič musí mít text-align: center.

• margin: auto: Pro blokové (block) prvky. Prvek musí mít stanovenou šířku (width). Prohlížeč automaticky rozdělí dostupný prostor vlevo a vpravo.

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

• Flexbox: Flexibilní systém rozložení. Používá se na rodičovském kontejneru.

  .container {
    display: flex;
    justify-content: center; /* Zarovnává prvky podle hlavní osy (vodorovně) */
  }
  

• Grid: Dvourozměrný systém rozložení. Používá se na rodičovském kontejneru.

  .container {
    display: grid;
    justify-items: center; /* Zarovnává obsah buněk horizontálně */
  }
  

• Position: absolute a transform: Pro absolutně pozicované prvky s známou šířkou.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Posune prvek o polovinu jeho šířky vlevo */
  }
  

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

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