Sayfa ekrandan daha büyük olduğunda bir div ekranın ortasına nasıl konumlandırılır

Merhaba, ekranın ortasında konumlandırılmış bir div elde etmek için aşağıdakine benzer bir şey kullanıyorum:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>

<div id="mydiv">Test Div</div>

Ancak bununla ilgili sorun, öğeyi ekranın değil sayfanın ortasına konumlandırmasıdır. Yani sayfa birkaç ekran yüksekliğindeyse ve ben sayfanın en üstündeysem (parçanın üst kısmı ekranda görüntülenir) div'in görünmesini sağladığımda ekranda bile görünmez. Görüntülemek için aşağı kaydırmanız gerekiyor.

Birisi bana ekranın ortasında görünmesini nasıl sağlayacağınızı söyleyebilir mi?

Hussein
Edited question 2011ööp33öö3 Şubat 2011 в 3:33
Programlama
window html css center
2011ööp6öö3 Şubat 2011 в 3:06
33 görünümler
Çözüm

sadece position:fixed ekleyin ve aşağı kaydırsanız bile görünümde kalacaktır. [http://jsfiddle.net/XEUbc/1/][1] adresinde görebilirsiniz

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
Hussein
Edited answer 2011ööp32öö3 Şubat 2011 в 3:32
Yorumlar (2)

Az önce bir test sayfasında tam olarak bu kodu test ettim ve div'i sayfaya mükemmel bir şekilde ortaladı, hatta önündeki yaklaşık 100 <br /> aşağı itmeye çalıştı.

Belki de kodunuzun geri kalanını kontrol ederek DIV'in değerlerinin üzerine yazan ya da DIV'inizi etkileyerek bu sorunlara neden olan bir şey olup olmadığını kontrol etmeyi deneyin.

Yorumlar (1)

Bunun için ekran boyutunu tespit etmeniz gerekir. Bu CSS veya HTML ile mümkün değildir; JavaScript'e ihtiyacınız vardır. İşte pencere özellikleriyle ilgili Mozilla Geliştirici Merkezi girişi https://developer.mozilla.org/en/DOM/window#Properties

Mevcut yüksekliği tespit edin ve buna göre konumlandırın.

Scott Radcliff
Edited answer 2011ööp30öö3 Şubat 2011 в 3:30
Yorumlar (0)