Hallo zusammen,
wie zentriere ich ein Bild (dynamische Größe) in der Mitte des Browserfensters?
Ich komme einfach nicht weiter. Horizontal zentrieren klappt wunderbar, am vertikalen verzweifel ich gerade irgendwie. Habe mir etliche Möglichkeiten angeschaut, aber das will mit meiner dynamischen Größe irgendwie nicht hinhauen.
Momentaner Zwischenstand sieht so aus:
HTML-Code:
<!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" dir="ltr" lang="de" xml:lang="de" style="height:100%;width:100%;">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<title>Hallo</title></head>
<body style="height:100%;width:100%;">
<div class="wraptocenter"><span></span>
<a href="https://server/index.php" target="_self">
<img alt="Logo" src="Logo.png" style="width:80%;" />
</a>
</div>
</body>
</html>
das Bild hat eine Größe von über 2000x800px und soll auf 80% der Fenstergröße (Breite) skaliert werden. Das klappt mit dem oben gezeigten Code wunderbar, horizontal mittig (center) ist es auch nur nicht vertikal (middle). Hängt es evtl. mit der Codierung XHTML 1.0 Strict zusammen?
Ich hoffe ihr könnt mich da zum Erfolg führen.