Sabit konumlandırdığınız(position: absolute) bir nesnenin yatayda ortalanmasını istiyorsanız margin-left:-(nesnenin genişliğinin yarısı) vermeniz yeterlidir.
Örnek 100px genişliğinde bir img var elimizde. O zaman kodumuz aşağıdaki gibi olacaktır.
.img1 {
position: absolute;top: 30px;
left: 50%;
margin-left: -50px;
}
position absolute yapmak için önce o elementin dışındaki elemeti relative yaptığımızı da unutmayalım.
Önemli bir ekleme 🙂
Teşekkür ederim.
bunun çok benzeri bir zımbırtıyı vertical (dikey) ortalama için IE de kullanabiliriz.
Şahsen şu an çalıştığım şirkette istemeye istemeye yazdığım frontend kodlaması ile öğrendim.
bir backend developer olarak frontend ile uğraşmak gerçekten can sıkıntısı…
Çok faydalı bi bilgi oldu. Elinize sağlık. Aslında teknik olarak çok basit ama çok zekice bir çözüm.
Genişliği belli olan bir nesneyi : “margin:0 auto” yaparak zaten basit bir şekilde ortalayabiliyoruz diye biliyorum. Hangisi daha avantajlı veya bu sadece bir alternatif mi oldu bize şimdi 🙂
@Harun Memiş “position: absolute” belirlediğiniz div’e herhangi bir tanımlama yapmazsanız sayfanızın soluna dayanacaktır. Yukarıdaki kod bunu engellemek için yazılmıştır.
Herhangi bir position belirlemesi yapmaya ihtiyacınız yoksa söylediğiniz gibi genişliği belli olan dive “margin:0 auto” tanımlaması yapmanız yatayda ortalamak için yeterlidir.
@Gözde Berberoğlu Anladım teşekkürler.
left:50% dediğimiz zaman ortalanır ama div boyutunu yokken 🙂 Div boyu buyudukce sağa doğru kayar ve hiç hoş bi görüntü olmaz. Çünkü siz soldan %50 verdiginizde divin sol kenarı tam ortada olur eğer div 100px ise divin diger ucu orta noktadan 100px sağda olur. Buda pek ortalanmış gibi olmaz, ama belki 20 – 30px lik divlerde pek anlaşılamayabilir.
@Sercan Örnekte de belirttiğim gibi 100px’lik bir diviniz varsa, margin-left:-50px vererek kutuyu kendi genişliğinin yarısı kadar sola çekip tam ortalamış olursunuz.
@gozde haklisiniz margini gormedim ben orda pardon, guzel bi yontem olmus saolun
güzel ve sade bir anlatım olmuş, tam aradığım şeydi. Teşekkürler..
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
şeklinde responsive ve tam hizalı şekilde ortalayabilirsiniz.