Чӣ тавр метавон элементҳоро дар саҳифаи веб ба таври уфуқӣ марказонид?

Ҳар хил кўп тарқалган усуллар мавжуд:

• text-align: Аниқ (inline ёки inline-block) элементлар учун ота блокда. Ота блокда text-align: center бўлиши керак.

• margin: auto: Блок (block) элементлар учун. Элементда аниқ кенглик (width) бўлиши керак. Браузер автоматик равишда мавжуд бўшликни сол қўяди.

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

• Flexbox: Мослашувчан тарзда тузилган тизим. Ота-она контейнерга қўлланилади.

  .container {
    display: flex;
    justify-content: center; /* Элементларни асосий тўғрида (гorizontal) марказлаштириш */
  }
  

• Grid: Икки ўлчамли тузилма тизими. Ота-она контейнерга қўлланилади.

  .container {
    display: grid;
    justify-items: center; /* Ҳужра мазмунини горизонтал марказлаштириш */
  }
  

• Position: absolute ва transform: Аниқ кенглиги бўлган абсолют позицияланган элементлар учун.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Элементни кенглиги яримига суриштириш */
  }
  

• Display: table ва margin: auto: Камдан-кам қўлланилади, аммо мумкин.

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