Div yatay olarak ortada ve dikey olarak orta

Bir sayfanın body'unun yatay ve dikey ortasında bir div hizalamak istiyorum. Div yatay olarak ortada ve dikey olarak orta

css:

.loginBody { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 
.loginDiv { 
    position: absolute; 
    left: 35%; 
    top: 35%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
}

Ve bu html vardır: Şimdi davrandığını

<body class="loginBody"> 
    <form id="form1"> 
    <div class="loginDiv"> 

    </div> 
    </form> 
</body>

Ben istiyorum ama tarayıcıyı yeniden boyutlandırmak, eğer tamamen belki tahrif oldu olarak çünkü mutlak konumlandırma. resized içinde ateş : Ben ekran görüntüleri bazı gösteriyorum resized ie enter image description here

: maksimize pencerede öyle enter image description here

: enter image description here

Boyutu değiştirilen chrome

Bu sorunu çözmenin ve göreceli konumlamayı kullanarak bu ortalanmış hizalamayı gerçekleştirmenin bir yolu var mı?

Teşekkürler.

Düzenleme:

yeniden boyutlandırma sırasında ateş içinde hiçbir kaydırma çubuğu görünür ancak diğer tarayıcılarda görünür. enter image description here

kaynak

2012-03-11 Tapas Bose

bu deneyin:

.loginDiv { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
    margin-left: -273px; /*half width*/ 
    margin-top: -132px; /*half height*/ 
}

Yarım boyutları tarafından merkeze taşımak ve geri daha sol ve - bu kadar ortalar bile budur

kaynak

2012-03-11 15:47:22 StilgarBF

Teşekkür yaradı, şimdi çalışıyor ama içinde ateş bir sorun inci Yeniden boyutlandırılırken kaydırma çubuğu yoktur, ancak diğer tarayıcılarda bulunur. Sorumu güncelledim. Lütfen buna bakın. –

Kaydırma çubuklarını istemiyorsanız - sadece 'taşma: gizli' nesnesine – StilgarBF

no'lu satır eklemek istiyorum. Kaydırma çubuğu istiyorum, bu yüzden vücutta taşma: otomatik 'ayarlıyorum ancak tasvir edildiği gibi kaydırma çubuğu yok. –

#div { 
    height: 200px; 
    width: 100px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
}

boyutlandırmak div merkezlemek için ortak bir yöntem. Kesinlikle konumlandırın, ardından yarıya ve yarıya kadar hareket ettirin. Ardından, pozisyonu, konumlandırdığınız div'in boyutlarının yarısına kadar olacak şekilde ayarlayın. Bu kalıcı pop-up yaparken, faydalı kaydırma bile yerinde div tutmak için olsa sabit konumlandırma kullanır Başvuru için

(.. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

kaynak

2012-03-11 15:47:29 Greg

Yardımlarınız için teşekkürler. şimdi çalışıyor ancak firefox'taki bir problem yeniden boyutlandırılırken kaydırma çubuğu yok, ancak diğer tarayıcılarda mevcut. Sorumu güncelledim. Lütfen buna bakın. –

http://jsfiddle.net/mAVd6/2/ bu, sayfanızın nasıl oluşturulduğunu temel olarak yansıtıyor mu? Firefox'ta kaydırma çubukları mı üretiyor? diğer tarayıcılar? - Eğer mutlak ile değiştirirseniz, kaydırma çubuklarına ne olur ?! – Greg

Eğer pozisyonu mutlak sabit olarak değiştirdiysem, herhangi bir tarayıcıda kaydırma çubuğu görünmez. –

sayfanın içeriği için bir div olun ve yapmak bir " aşağıdaki css ile içerik" sınıfı. Bu. yardım için. birini yardımcı olur. Android cihazlar için PhoneGap ile jQuery Mobile benim için

CSS

.content { 

     width: 100%; 
     height: 100%; 
     top: 25%; 
     left: 25% 
     right: 25%; 
     text-align: center; 
     position: fixed; 
}

kaynak

2012-08-07 17:49:06

Div yatay olarak ortada ve dikey olarak orta

cevap

İlgili konular