Sayfadaki bir <div>
öğesini hem dikey hem de yatay olarak ortalamanın en iyi yolu nedir?
margin-left: auto; margin-right: auto;` ifadesinin yatayda ortalayacağını biliyorum, ancak bunu dikey olarak da yapmanın en iyi yolu nedir?
Benim dabblet.com'daki demom
Bu demodaki ana numara, normal akışta öğelerin yukarıdan aşağıya doğru gitmesidir, bu nedenle margin-top: auto
sıfır olarak ayarlanır. Bununla birlikte, tamamen konumlandırılmış bir eleman boş alan dağılımı için aynı şekilde davranır ve benzer şekilde belirtilen top
ve bottom
da dikey olarak ortalanabilir (IE7'de çalışmaz).
div
ile çalışacaktır.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
İşte bir süre önce yazdığım bir komut dosyası (jQuery kütüphanesi kullanılarak yazılmıştır):
var centerIt = function (el /* (jQuery element) Element to center */) {
if (!el) {
return;
}
var moveIt = function () {
var winWidth = $(window).width();
var winHeight = $(window).height();
el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
};
$(window).resize(moveIt);
moveIt();
};