Bir web sayfasında öğeleri yatay olarak ortalamanın yolları nelerdir?

İşte birkaç yaygın yöntem:

• text-align: Ana kapsayıcı içindeki satır içi (inline veya inline-block) öğeler için. Ana kapsayıcının text-align: center olması gerekir.

• margin: auto: Blok (block) öğeler için. Öğenin belirli bir genişliği (width) olmalı. Tarayıcı, kullanılabilir alanı otomatik olarak sol ve sağa dağıtır.

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

• Flexbox: Esnek düzen sistemi. Ana kapsayıcıya uygulanır.

  .container {
    display: flex;
    justify-content: center; /* Öğeleri ana eksende (yatayda) hizalar */
  }
  

• Grid: İki boyutlu düzen sistemi. Ana kapsayıcıya uygulanır.

  .container {
    display: grid;
    justify-items: center; /* Hücre içeriğini yatayda hizalar */
  }
  

• Position: absolute ve transform: Bilinen genişliğe sahip mutlak konumlandırılmış öğeler için.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Öğeyi genişliğinin yarısı kadar sola kaydırır */
  }
  

• Display: table ve margin: auto: Nadiren kullanılır, ancak mümkündür.

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