Ինչպիսի՞ն են վեբ էջում տարրերի հորիզոնական կենտրոնացման եղանակները։

Անհրաժեշտ է մի քանի տարածված մեթոդներ:

• 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; /* Կենտրոնացնում է տարրերը գլխավոր առանցքի (հորիզոնական) վրա */
  }
  

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