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.
