Kādi ir veidi, kā horizontāli centrēt elementus tīmekļa lapā?

Ir daudz biežāk sastopamu metožu:

• text-align: Inline (inline vai inline-block) elementiem iekļautā vecākā blokā. Vecāks ir jābūt ar text-align: center.

• margin: auto: Bloka (block) elementiem. Elements ir jābūt ar noteiktu platumu (width). Pārlūkprogramma automātiski sadala pieejamo vietu pa kreisi un pa labi.

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

• Flexbox: Elastiska izkārtojuma sistēma. Tiek piemērots vecāka konteineram.

  .container {
    display: flex;
    justify-content: center; /* Izlīdzina elementus pa galvenajai ass (horizontāli) */
  }
  

• Grid: Divdimensiju izkārtojuma sistēma. Tiek piemērots vecāka konteineram.

  .container {
    display: grid;
    justify-items: center; /* Izlīdzina šūnu saturu horizontāli */
  }
  

• Position: absolute un transform: Absolūti pozicionētiem elementiem ar zināmu platumu.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Pārvieto elementu uz pusi no tā platuma pa kreisi */
  }
  

• Display: table un margin: auto: Retāk lietots, bet iespējams.

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