რა გზებია ვებგვერდზე ელემენტების ჰორიზონტალურად ცენტრში განთავსებისთვის?

არსებობს რამდენიმე გავრცელებული მეთოდი:

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