Zentrierungen in jeder auflösung

1 Hagen (Gast)

hallo,

ich bastel an einer seite, die sich immer genau in der bildschirmmitte befinden soll. ich habe sie für 1024x768 entworfen und mit einem 10px-abstand von oben

{margin: 10px auto auto auto}

definiert. unter dieser auflösung ist alles super, wenn ich jedoch auf 1280x1024 mir die seite anschaue, ist natürlich alles viel zu weit oben.

(wenn ich alles auf "auto" stelle, was logisch wäre, klebt die seite leider am oberen bildrand)

jemand ne idee?
vielen dank!

2 Jörg Kruse

Hallo Hagen,

vertikales Zentrieren von Blockelementen ist in CSS leider nicht so einfach umzusetzen wie horizontales Zentrieren. Auf der folgenden Seite ist ein Lösungsweg beschrieben:

Vertical Centering in CSS

3 kadees

Hi,

entweder du versuchst es mit einem relativen Margin

#xyz {margin: 15% auto;}

oder

#xyz {margin: 1.5em auto;}

Vielleicht ist ist auch das nützlich:

http://www.intensivstation.ch/files/templates/temp11.html

4 Rudy

Ich nehme dazu immer folgenden float-Trick (habe ich vor Urzeiten mal irgendwo gefunden, funktioniert immer noch gut):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Bildschirm-Mitte</title>
</head>
<style type="text/css">

html, body {
  height:100%;
  margin:0;
  padding:0;
}

div#spacer { 
  width:1px;
  height:50%;
  margin-bottom:-300px; /* halbe container-hoehe */
  float:left;
}

div#all {
  margin:0 auto;
  position: relative; 
  text-align: left;
  clear: left;
  background: black;
  height: 600px;
  width: 750px;
  color:white;
  font-size:160px;
}
</style>
<body>
  <div id="spacer"></div>
  <div id="all">
    :) <!--hier den content rein -->
  </div>
</body>
</html>

nach oben

Zentrierungen in jeder auflösung

Beitrag schreiben (als Gast)