CSS'te div'i yatay olarak ortalamak

Bu soru 1 kez yanıtlandı.

• bill gates

  17 Haziran 2019 23:33

  33

  Eskiden html'de center diye bir tag vardı, Html 5 ile birlikte artık yok ama çok daha pratik yollar var.

  Örneğin ortala isimli bir class yazabilir ve aşağıdaki özellikleri ekleyebilirsiniz:

  .ortala {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
  }

  Ya da sadece bir yazıyı bir div içerisinde ortalamak istiyorsanız:

  text-align: center;

  CSS özelliğini kullanabilirsiniz.

  Eğer div boyutunu otomatik olarak kullanıyorsanız:

  <div id="dis">    
      <div id="ic">Div içeriği</div>
  </div>

  Gibi bir html içi aşağıdaki CSS'i kullanabilirsiniz:

  #dis {
    text-align: center;
  }
  #ic {
    display: inline-block;
  }

  Ya da minimum uzunluğu belli bir div için aşağıdaki css'i kullanabilirsiniz:

  .ortala {
     margin-left: auto;
     margin-right: auto;
  }

  Alternatif olarak:

  margin: 0 auto;

  Özelliği de yine stil olarak yazıldığı div'in ortalanmasını sağlayacaktır.

  Son olarak eğer flexbox kullanıyorsanız:

  .container {
    display: flex;
    justify-content: center;
  }

  class'ı ile yine flexbox destekleyen güncel tarayıcılar için div'i ortalayabilirsiniz.