Div poziomo w środku i w pionie w środku

Chcę wyrównać div poziomo w środkowej i pionowej połowie strony body.Div poziomo w środku i w pionie w środku

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; 
}

I mam to HTML:

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

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

Teraz zachowuje się jak chcę go, ale jeśli rozmiar przeglądarki, stało się całkowicie zniekształcone, może dzieje się tak, ponieważ absolutne pozycjonowanie. Ja pokazano niektóre screeny: w przeskalowane Firefox: enter image description here

w zmienionym rozmiarze Chrome: enter image description here

w przeskalowane IE: enter image description here

w zmaksymalizowane okno to jest: enter image description here

Czy istnieje sposób na rozwiązanie tego problemu i osiągnięcie tego wyśrodkowanego wyrównania przy użyciu względnego pozycjonowania?

Dzięki.

Edit:

w Firefoksie bez przewijania pojawia się podczas zmiany rozmiaru, ale pojawia się w innych przeglądarkach. enter image description here

Źródło

2012-03-11 Tapas Bose

Spróbuj tego:

.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*/ 
}

przenieść go na środku, a nie z powrotem w lewo i przez pół wymiarów - że będzie to centrum nawet na zmianę rozmiaru

Źródło

2012-03-11 15:47:22 StilgarBF

Dzięki za pomoc. jest teraz działa, ale jeden problem w Firefoksie th Podczas zmiany rozmiaru nie ma paska przewijania, ale jest on dostępny w innych przeglądarkach. Zaktualizowałem moje pytanie. Proszę spojrzeć na to. –

jeśli nie chcesz pasków przewijania - po prostu dodaj 'przepełnienie: ukryte' do ciała – StilgarBF

nie Chcę paska przewijania, więc ustawiam' overflow: auto' w ciele, ale wciąż nie ma paska przewijania, jak pokazano. –

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

Jest powszechna metoda centrowania elementu div. Ustawiasz go absolutnie, a następnie przesuwasz go w połowie i do połowy. Następnie dostosuj pozycję z marginesami o połowę wymiarów elementu div, który pozycjonujesz.

Dla odniesienia (ta wykorzystuje pozycjonowanie stałe chociaż zachować div w miejscu nawet podczas przewijania, pomocny, gdy robi modalnych wyskakujące okienka .. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Źródło

2012-03-11 15:47:29 Greg

Dzięki za pomoc. to działa, ale jeden problem w firefoxie nie ma paska przewijania podczas zmiany rozmiaru, ale jest obecny w innych przeglądarkach. Zaktualizowałem moje pytanie. Proszę spojrzeć na to. –

http://jsfiddle.net/mAVd6/2/ czy to w zasadzie odzwierciedla sposób tworzenia strony? Czy tworzy paski przewijania w Firefoksie? inne przeglądarki? - jeśli wymienisz się wartością absolutną z ustaleniem, co dzieje się z paskiem przewijania ?! – Greg

Jeśli zmieniłem pozycję na bezwzględną na stałą, to w żadnej przeglądarce nie pojawi się pasek przewijania. –

Marka div, który jest za zawartość strony i dokonać " zawartość”klasa z następującym css. to działało na mnie na Jquery Mobile przy PhoneGap dla urządzeń z systemem Android. Mam nadzieję, że ktoś pomoże.

CSS

.content { 

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

Źródło

2012-08-07 17:49:06

Div poziomo w środku i w pionie w środku

Odpowiedz

Powiązane problemy