Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 26.08.2006, 11:22
Benutzerbild von heiko_rs
heiko_rs heiko_rs ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von ulle
Irgendwie zu einfach (?!)
Könnte man denken, aber es ist tatsächlich so einfach Die Möglichkeiten mit display: table/table-cell sind erstaunlich, und ausschließlich der IE macht dabei einen Strich durch die Rechnung.

Angeregt durch das CSS-Dropdown-Menü von Stu Nicholls hatte ich mir daher auch schonmal eine vertikale Zentrierung überlegt, die ohne jegliches Zusatz-Markup auskommt (d.h. das das zentrierte Element ist das einzige innerhalb von <body>). Nur der IE bekommt zwei kurze CCs im body, sowie natürlich die übliche "CSS-Extrawurst".

Der Vorteil bei dieser Methode ist, daß man die Höhe des zentrierten Elementes nicht kennen muß; es wird völlig unabhängig von seiner Höhe vertikal zentriert.

Erfolgreich getestet in Gecko ab Netscape 7.1, Opera ab 7.2, IE ab 5.0 und Safari. Die CCs habe ich rot markiert, was etwas ungewohnt aussieht, aber das übliche Grün ist ja bereits vergeben

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Zentrierung</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

html,
body {
	height: 100%;
	width: 100%;
	}

html {
	display: table;
	border-collapse: collapse;
	}

body {
	display: table-cell;
	vertical-align: middle;
	}

div {
	height: 200px;
	width: 200px;
	background: gray;
	color: black;
	margin: 0 auto;
	}

</style>

<!--[if IE]>

<style type="text/css">

table {
	height: 100%;
	width: 100%;
	border-collapse: collapse;
	}

td {
	vertical-align: middle;
	text-align: center;
	}

div {
	text-align: left;
	}

</style>

<![endif]-->

</head>

<body>

<!--[if IE]><table><tr><td><![endif]-->

<div>text</div>

<!--[if IE]></td></tr></table><![endif]-->

</body>

</html>

Geändert von heiko_rs (26.08.2006 um 12:10 Uhr)
Mit Zitat antworten
Sponsored Links