• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

div in der mitte vom Fenster zentrieren?

D

dvd

New member
Hallo,
ich versuche gerade ein kleines Programm zu schreiben um das div in der mitte vom Fenster zu zentrieren. Das div bewegt sich zu Hälfte der Strecke nach Link aber vom Top bewegt es sich nicht! Es gibts keinen Unterschied im Code zwischen height() und width!!

Ich wollte später dann von window_width/2 obj_width/2 abziehen und so auch für window_height....

jQuery-Code:
PHP: 
$(document).ready(function(){
   function move_div(){
   	window_width = $(window).width();
   	window_height = $(window).height();
        
        //obj_width = $('#verycenter').width();
   	 //obj_height = $('#verycenter').height();

     $('#verycenter').css('top', (window_height/2)).css('left', (window_width/2));
    }
  move_div();
});
 
Ich habe das als css file also absolute ist gesetzt:

HTML: 
#verycenter{
	position: absolute;
	background-color: black;
	width: 250;
	height: 150;
}
 
Man kann auch rein mit CSS ein Element zentrieren:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Center element horizontal and vertical with arbitraty size</title>
<style type="text/css">

#outer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	white-space: nowrap;
}

#spanner {
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}

#inner {
	display: inline-block;
	vertical-align: middle;
	width: 200px;
	height: 300px;
	border: 2px dashed darkgray;
	white-space: normal;
}

</style>
</head>
<body>
<div id="outer">
<span id="spanner"></span><span id="inner">
200 x 300
</span>
</div>
<script type="text/javascript">
(function(){
	var size = [[100, 300], [100, 100], [300, 100], [300, 500], [200, 500], [200, 300]];
	var inner = document.getElementById("inner");
	inner.onclick = function(){
		var s = size.shift();
		size.push(s);
		inner.style.width = s[0] + "px";
		inner.style.height = s[1] + "px";
		inner.innerHTML = s.join(" x ");
	}
})();
</script>
</body>
</html>
 
Ja ich weiß dass man das mit css machen kann aber ich gucke mir ein Tutorial an und im Tutorial wird es mit jQuery umgesetzt darum wollte ich es auch mit jQuery machen.
Also was ich bei mir nicht verstehe wieso das div nur nach links und nicht nach unten bewegt? wie kann man das mit jQuery umsetzen?
 
dvd schrieb:
aber ich gucke mir ein Tutorial an und im Tutorial wird es mit jQuery umgesetzt darum wollte ich es auch mit jQuery machen.
Zum Vergrößern anklicken....
Wieso? Ich sehe da wirklich gar keinen Sinn darin:
  • du musst jQuery einbinden -> längere Ladezeiten
  • es ist langsamer als wenn man es gleich mit CSS macht
  • es ist unnötig und komplizierter, m.E. auch irgendwie unsauber
  • was ist mit Usern, die JS deaktiviert haben??

kkapsner schrieb:
Ich hab' schneller die lokale Datei auf meiner Festplatte gefunden... ;)
Zum Vergrößern anklicken....
:eagerness: war übrigens eigentlich gar nicht mal an dich gerichtet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben