Inhalt vertikal zentrieren mit CSS [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : Inhalt vertikal zentrieren mit CSS

Mark

2008-09-04, 01:03:16

Ich möchte gerne mit CSS ein DIV vertikal zentrieren, jedoch ist die Höhe dieses Containers variabel.

Wenn der Container kleiner als die Seitenhöhe ist, dann soll er vertikal zentriert werden. Ist der Container jedoch größer als die Seitenhöhe, so soll eben ganz oben auf der Seite sein damit man problemlos runterscroolen kann.

Ich habe schon einiges in Google gefunden, aber überall wird vorrausgesetzt, dass man die Containerhöhe festsetzt und diese eben nicht veriiabel sein kann.

Wie mach ich das nun?

Gast

2008-09-04, 09:45:14

Mit Javascript wäre das relativ einfach zu lösen. Aber ich fürchte mit CSS allein wirst du da nichts hinbekommen.

Mark

2008-09-04, 10:52:53

Und wie würde das mit Javascript gehn? Eigentlich würde es ja auch mit einem Tabellenlayout gehn

ezzemm

2008-09-04, 17:48:55

Iiiih, ein Tabellenlayout ;)

Ich habe letztens für mich ein solches Skript gemacht, kannst es gerne als Vorlage nehmen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$pagename</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Tahoma, Arial, "Trebuchet MS", "Lucida Sans", "Lucida Sans Unicode";
font-size: 12px;
color: DarkSlateGray;
background-color: WhiteSmoke;
}
div {
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 20px;
border: 1px solid LightGrey;
background-color: White;
text-align: center;
}
</style>
<script>
function centerMe() {
var div = document.getElementById("box");
if (typeof window.innerHeight == "undefined") {
var gap = (document.documentElement.clientHeight - div.offsetHeight) / 2;
} else {
var gap = (window.innerHeight - div.offsetHeight) / 2;
}
div.style.marginTop = gap + "px";
}
</script>
</head>
<body onload="centerMe()">
<div id="box">$error</div>
</body>
</html>

Tommes

2008-09-04, 17:55:31

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

darph

2008-09-04, 18:52:28

http://www.jakpsatweb.cz/css/css-vertical-center-solution.htmlSmart.

Tommes

2008-09-05, 11:46:37

Abgesehen davon, dass man 3 div Elemente braucht ;) Übrigens war das der 1. Google Treffer für "CSS vertical centering".