:: Buchempfehlung ::

KTB · #1 27.05.2011, 10:33:40

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.

KTB · #2 30.05.2011, 10:57:23

Kurzer Zwischenstand:

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">
<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">

	* {
		margin:0;
		padding:0;
		}

	html, body {
		height:100%;
		}

	body {
		text-align:center; /* horizontal centering for IE Win quirks */
		}
		
	img {
	    border: none;
		}

	#distance { 
		width:1px;
		height:50%;
		margin-bottom:-30%; /* half of container's height ~= img.height/2.4/img.width */
		float:left;
		}

	#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:center;
		width:80%;
		clear:left;
		}

</style>
<title>Hallo</title></head>
<body onLoad="document.getElementById( 'distance' ).style.marginBottom = Math.round(document.images[0].height/document.images[0].width/2.4*100)*(-1) + '%';">

<div id="distance"></div>
	<div id="container">
		<a href="index.php" target="_self"><img id="logo" alt="Logo" src="Logo.png" style="width:100%;" /></a>
	</div>
	
</body>
</html>

Funktioniert zwar, gefällt mir aber nicht da JS dazu notwendig ist. Muss auch ohne gehen - nur mit CSS. Mal schauen ob ich das hin bekomme.

knight1 · #3 30.06.2011, 18:32:08

Hast Du dich schonmal näher mit HTML und CSS beschäftigt?

http://de.selfhtml.org/css/eigenscha...htm#text_align

Kai

KTB · #4 01.07.2011, 08:35:43

Ja

KTB · #5 01.07.2011, 09:42:51

Damit wir uns nicht falsch verstehen, mittels einer Tabelle und anderem DOCTYPE ist es für mich problemlos möglich das Bild mittig zu positionieren.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Horizontal und vertikal zentriertes Element</title>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr><td style="align: center; vertical-align:middle;">
<a href="index.php" target="_self"><img id="logo" alt="Logo" src="Logo.png" style="width:100%; border: 0px;" /></a>
</td></tr></table>
</body>
</html>

Probleme bereitet mir XHTML 1.0 Strict in Zusammenarbeit mit Containern. Ein Bild mit fester Größe mittig zu positionieren bekomme ich da auch hin, jedoch nicht wenn z.B. die Breite dynamisch mit 100% angegeben wird.

knight1 · #6 01.07.2011, 10:01:54

Bei XHTML kann ich dir nicht helfen. Habe mich da noch nicht mit beschäftigt und kenne daher dessen Besonderheiten und die Unterschiede zu "normalem" HTML nicht.

Bei Deinem HTML-Beispiel hast Du aber einen Fehler:

Code:

style="align: center; vertical-align:middle;"

Schau Dir mal den SELFHTML-Link von mir genauer an.

Kai aka Knight1

KTB · #7 01.07.2011, 12:59:40

Richtig, müsste text-align heißen und das Slash am Ende vom img-Tag ist auch überflüssig.

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!