Hallo zusammen!
Ihr findet unten einen Versuch ein Blockelement vertikal zu zentrieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
[code lang=css]
.block {
position: absolute;
top: 50%;
margin-top: -20%;
left: 50%;
margin-left: -40%;
width: 80%;
border: 1px solid black;
background-color: #808080;
}
</style>
</head>
<body>
<div class="block">
<img src="blanko.jpg" style="width: 100%;">
</div>
</body>
</html>
[/code]
Dazu gibt es noch folgendes zu sagen: Das Bild "blanko.jpg" ist genau 1x2 Pixel groß. Vergrößert sich das Browserfenster, vergrößert sich das Bild, vergrößert sich der Block genau im Verhältnis 1x2. Sollte der Anwender das Fenster schmaler als dieses Verhältnis machen, rutscht der Inhalt aus dem Sicht- und scrollbaren Bereich. Das wäre im Entferntesten für den Augenblick akzeptabel.
Nun weiß ich schon, ist dies nicht die eleganteste Art etwas vertikal zu zentrieren, schön wäre auch das herausrutschen ganz loszuwerden. Aber das Problem für mich ist eher, der Safari-Engine interpretiert mein Geschreibsel anders als seine Kollegen. Er mag den Zusammenhang zwischen Breite und Höhe nicht so für mich recht annehmen.
Grüße.