CSS elementi ortalama yöntemleri

CSS elementi ortalama yöntemleri

  Haziran 11, 2019    Gökhan Krl

---

CSS ile herhangi bir nesneyi ortalama yapmanın bir çok yolu vardır. Bunları aşamalar halinde açıklayalım.


1. Display: flex ile hizalama
CSS 3 te uzun zamandır kullanılan flex düzeni ile ortalamayı ilk olarak gösterelim.

display:flex;
justify-content:center;
align-items:center;

display: flex her tarayıcıda sorunsuz çalışmıyor olabilir. Diğer yöntemleri de deneyebilirsiniz.


2. Margin: auto
Sıklıkla kullandığımız yöntemlerden birisi de margin: auto 'dur.

display:block;
margin:0px auto;


3. Display: Inline-Block
Elementin türünü inline-block olarak ayarlayıp bir text gibi davranmasını sağlayabilirsiniz.

display:inline-block;
text-align:center;


4. Position: absolute
Son olarak ta position türünü değiştirip, top ve left kullanımı ile ortalama yapabilirsiniz.

position:absolute;
top:50%;
left:50;
transform:translate(-50%, -50%);