Benutzer: Gast
Eintrag: Webseite horizontal und vertikal zentrieren

Webseite horizontal und vertikal zentrieren

von: marcel
Kreise: HTML / CSS / JS

index.html

Code: XML XHTML XSLT HTML
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Webseite horizontal und vertikal zentrieren</title>

<link rel="stylesheet" type="text/css" href="css/page.css" />

</head>
<body>

	<div id="page">
		This is the centered content of the page.
	</div>
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/page.js"></script>
	
</body>
</html>

css/page.css

Code: CSS
html {
	font-size: 13px
	background: blue;
}

body {
	font-size: 100.1%;
	line-height: 140%;
}

#page {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 920px;
	height: 560px;
	margin-left: -460px; /* half width*/
	margin-top: -270px; /* half height */
	color: white;
	background: red;
 	background-image: linear-gradient(red 0%, black 100%);
}

Nun würde man Teile von div#page nicht sehen, wenn das Browserfenster kleiner als der zentrierte DIV ist, da mit negativen margin-Werten gearbeitet wird – diese werden bei der Berechnung von Scrollbalken nicht beachtet. Um dem entgegenzuwirken kann man mit Hilfe von JavaScript die Fenstergröße überwachen und entsprechend den DIV neu positionieren.

js/page.js

Code: JS JScript JavaScript
// control the window-size and the left-/top-margin resp. -position of the #page
var pageObj = {},
	pageObjW = 0,
	pageObjH = 0,
	t = 0,
	l = 0,
	mt = 0,
	ml = 0,
	watchPageMinSize = function() {
		if ($(window).width() < pageObjW) {
			l = 0;
			ml = 0;
		} else {
			l = "50%";
			ml = pageObjW / -2;
		}
	
		if ($(window).height() < pageObjH) {
			t = 0;
			mt = 0;
		} else {
			t = "50%";
			mt = pageObjH / -2;
		}
	
		pageObj.css({
			top : t,
			left : l,
			marginLeft : ml,
			marginTop : mt
		});
};

$(document).ready(function() {
	pageObj = $("#page");
	pageObjW = pageObj.width();
	pageObjH = pageObj.height();
	watchPageMinSize();
});

$(window).resize(function() {
	watchPageMinSize();
});
Es gibt noch keine Kommentare.