Веб барагында элементтерди горизонталдык борборлоо жолдору кандай?

Көптөгөн кеңири тараган ыкмалар бар:

• text-align: Ата блоктун ичинде жайгашкан inline (inline же inline-block) элементтер үчүн. Ата блокдо text-align: center болушу керек.

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

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

• Flexbox: Ички жайгаштыруу системасы. Ата-эне контейнерге колдонулат.

  .container {
    display: flex;
    justify-content: center; /* Элементтерди негизги ороо (горуҳ) боюнча борборлоштуруу */
  }
  

• 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;
  }