CSS İLE BLOK ELEMANLARIN (YATAY) ORTALANMASI

Css ile satır içi elemanları yatay eksende text-align:center özelliği ile basitçe ortalayabilirken , blok elemanları ortalamak için farklı CSS özellikleri kullanmamız gerekiyor..

MARGIN İLE ORTALAMA

Blok elemanları margin özelliği ile ortalamak için , sol ve sağ margin  (margin-left ve margin-right) değerleri nin "AUTO" yapılması gerekir. Üst ve alt margin değerlerinin yatay ortalama için bir etkisi olmayacaktır. 

CSS

div {
  width:100px;
  padding:1rem;
  background-color:orange;

 /* Sol ve Sağ margin değerleri auto yapılıyor..*/
  margin-left : auto;
  margin-right : auto;

   /* yada 
   margin:0 auto;
}

HTML

<div> DIV 1 </div>

EKRAN

Blok elemanlar margin değerleri ile yukarıdaki gibi ortalanabilir. Ancak eleman  relative dışında bir konumlandırma (position) almışsa , bu durumda sadece  margin ile ortalanamaz. Konumlandırma için kullanılan  Top ve Left değerlerinin uygun oranlarda eklenmesi gerekir. 

FLEX İLE ORTALAMA

Flex yapı ile blok elemanları yatayda ortalayabilmek için  , elemanın bir kapsayıcı içerisinde olması gerekir. Kapsayıcıya verilecek JUSTIFY-CONTENT : CENTER değeri , içindeki eleman(ları) yatayda ortalayacaktır. Marginden farklı olarak tüm içerikler yatayda ortalanırlar.

CSS

.container {    /* kapsayıcı */ 
   display:flex; 
   justify-content:center;
   gap:5px;
}

.container div {
  width:100px;
  padding:1rem;
  background-color:orange;
}

HTML

<div class="container">
   <div> DIV 1 </div>
   <div> DIV 2 </div>
</div>

EKRAN

Flex yapıda yerleşim yönü belirtilmez ise, kapsayıcı içerisindeki elemanlar yanyana (row) yerleşirler. Ancak yön değiştirilirse yani  dikey (column) yapılırsa , justify-content bu kez dikeyde hizalama yapar.

GRID İLE ORTALAMA

GRID yapı ile blok elemanları yatayda ortalayabilmek için  , flex yapıda olduğu gibi eleman(lar)ın bir kapsayıcı içerisinde olması gerekir. Kapsayıcıya verilecek JUSTIFY-CONTENT : CENTER değeri , içindeki eleman(ları) yatayda ortalayacaktır. Marginden farklı olarak tüm içerikler yatayda ortalanırlar.

CSS

.container {    /* kapsayıcı */ 
   display:grid; 
   justify-content:center;
   gap:5px;
}

.container div {
  width:100px;
  padding:1rem;
  background-color:orange;
}

HTML

<div class="container">
   <div> DIV 1 </div>
   <div> DIV 2 </div>
</div>

EKRAN

Flex yapıda yerleşim yönü belirtilmez ise, kapsayıcı içerisindeki elemanlar yanyana (row) yerleşirler. Ancak yön değiştirilirse yani  dikey (column) yapılırsa , justify-content bu kez dikeyde hizalama yapar.