Jak ustawić element div na środku ekranu RZECZYWISTEGO? (JQuery)

Potrzebuję ustawić element div na środku ekranu. Znalazłem prosty kod poniżej, ale potrzebuję centrum RZECZYWISTEGO ekranu, a nie "całkowitej wysokości/2" strony!Jak ustawić element div na środku ekranu RZECZYWISTEGO? (JQuery)

tutaj jest kod Jquery, który centruje element, ale nie rzeczywisty ekran;

jQuery.fn.center = function() { 
this.css("position","absolute"); 
this.css("top", ($(window).height() - this.height())/2+$(window).scrollTop() + "px"); 
this.css("left", ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); 
return this;}

jak mówiłem, trzeba obliczyć rzeczywiste rozmiary ekranu (jak 1366 * 768 lub cokolwiek użytkownik zmienia rozmiar przeglądarek) i umieść element na środku ekranu. więc jeśli przewijam stronę w dół, zawsze środkowy div powinien być ponownie w środku.

Źródło

2013-02-26 Said Bahadır Kaya

[Ta odpowiedź] (http://stackoverflow.com/questions/504052/determining-position-of-the-browser-window-in-javascript) może Ci idą w dobrym kierunku. To dość stary wątek, więc jestem pewien, że jest tam jakaś fajna biblioteka, która zawiera różne połączenia wymagane dla różnych przeglądarek. – Matthew

@Matt Był komentarz, że IE akceptuje teraz screenX i screenY. Teraz jest kompatybilna z wieloma przeglądarkami. :) –

Jeśli jesteś w porządku z użyciem fixed pozycjonowanie zamiast absolute, możesz użyć czegoś takiego:

jQuery.fn.center = function() 
{ 
    this.css("position","fixed"); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
} 

$('#myDiv').center(); 
$(window).resize(function(){ 
    $('#myDiv').center(); 
});

Demo: http://jsfiddle.net/GoranMottram/D4BwA/1/

Źródło

2013-02-26 13:57:00

to naprawiło mój problem, dziękuję! –

Spróbuj tego:

var width=$("#div").css("width"); 
var half=width/2; 
$("#div").css("marginLeft","-"+half+"px");

Zmień #div ze swoim selektora.

Źródło

2013-02-26 13:40:44

Jeszcze raz ... Jeśli czytasz uważnie, pytanie dotyczy centrowania PIONOWEGO i proponujesz centrowanie HORIZONTAL. – Havok

to works..take tego nurkowania go jako #sample

dać swój styl css jak

#sample{ 
margin-left:auto; 
margin-right:auto; 
width:200px;//your wish 
}

że to działa ..

Źródło

2013-02-26 13:41:35 sasi

Jeśli uważnie czytasz, pytanie dotyczy centrowania PIONOWEGO i proponujesz centrowanie HORIZONTAL. – Havok

i nie będzie działać ze stałymi elementami –

Jak ustawić element div na środku ekranu RZECZYWISTEGO? (JQuery)

Odpowiedz

Powiązane problemy