Murat Çeşmecioğlu

Kişisel Web Sitesi

CSS İle Dikey Ortalama

Yine web tasarımı işlerine giriştiğim için arada sırada CSS içinde kodlar vereyim dedim. Her seferinde arıyorum işe yarar bazı CSS kodları. Fakat kullandıktan sonra tekrar lazım olduğunda eski kodlardan araması daha uzun sürüyor :)
Bu yüzden hem paylaşmış olayım hemde kendime not olsun diye yazıyorum.

Bir çok farklı şekilde dikey ortalama metodu var. Benim en çok hoşuma gideni paylaşacağım. Yazdığım kodlar aynı zamanda yatay ortalamayı da sağlıyor. Yani bir div’i sayfanın tam ortasına getirebilirsiniz.
CSS:
[css]body {margin:0}
#ortala1 {position:relative;height:200px;width:500px;border:1px solid #f0f}
#ortala2 {position:absolute;width:100%;height:1px;top:50%;overflow: visible;text-align:center;visibility:visible;display: block}
#ortala3 {position:absolute;left:50%;width:100%;height:20px;margin-top:-10px;margin-left:-50%;}[/css]

HTML:
[html]<div id="ortala1">
<div id="ortala2">
<div id="ortala3">
Merhaba Dünya! Hep bunu yazmak istemişimdir :)
</div>
</div>
</div>
[/html]

Bu şekilde yaptığınızda dikey ortalanmış bir div elde edeceksiniz. Hareket ettirmek için ortala1 adlı div’i kullanın. Gerekirse ortala3 adlı div’in yükseklik değerini ayarlamanız gerekebilir.

Yorum Yazın

İsim (gerekli)

E-Posta (gerekli)

İnternet sitesi