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..
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.
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;
}
<div> DIV 1 </div>
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 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.
.container {    /* kapsayıcı */ 
   display:flex; 
   justify-content:center;
   gap:5px;
}
.container div {
  width:100px;
  padding:1rem;
  background-color:orange;
}
<div class="container">
   <div> DIV 1 </div>
   <div> DIV 2 </div>
</div>
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 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.
.container {    /* kapsayıcı */ 
   display:grid; 
   justify-content:center;
   gap:5px;
}
.container div {
  width:100px;
  padding:1rem;
  background-color:orange;
}
<div class="container">
   <div> DIV 1 </div>
   <div> DIV 2 </div>
</div>
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.
 
									 
									 
									
							
							Lütfen yorumlarınızda saygılı, yapıcı ve anlaşılır bir dil kullanın.
							
							Küfür, hakaret ya da spam içerikler onaylanmaz.