michat: Warum funktioniert zentrieren (H u V) mit % nicht?

Beitrag lesen

SELF-Forum

Warum funktioniert zentrieren (H u V) mit % nicht?

michat
– Informationen zu den Bewertungsregeln

Wenn ich, wie in den FAQ beschrieben, den Inhalt auf dem Bildschirm zentrieren will, und zwar horizontal und vertikal, dann klappt das mit Prozentangaben nicht. Zwar lässt sich die alles umschliessende Box mit negativem Margin in die Mitte rücken, bei der Höhe klapp dies jedoch nicht wie gewünscht.
Warum?
(In den CSS2.1 Specs habe ich die relevanten Seiten zum Boxmodel, und zu width und heigth durchgelesen ... aber den springen Punkt nicht entdeckt.)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">  
	  
	\* {margin: 0; padding: 0; background-color: black; font-family: Arial; color: white;  
	} 		  
	  
	html {width: 100%; height: 100%;}  
	  
	body {width: 100%; height: 100%;}  
	  
	h2 {font-size: 1em;}  
	  
	.center {text-align: center;}

#zentriert {
  position: absolute;
  /* width: 14em;
  height: 8em; */
  border: 1px solid white;
  padding: 1em;
  top: 50%;
  left: 50%;
  /* margin-left: -7em;
  margin-top: -4em; */
   width: 50%;
  height: 50%;
  margin-left: -25%;
  margin-top: -25%;

}

</style></h2>

<title>zentrieren klappt nicht</title>

</head>
<body>

<div id="zentriert">

<h2>
Test
</h2>

</div>
</body>
</html>

bye

MH

--
war unregistriert "michaa"
Beitrag melden
–
Informationen zu den Bewertungsregeln