An dieser Stelle erscheinen von Zeit zu Zeit Lösungen zu speziellen Problemen beim Web-Design.
Es handelt sich dabei stets um Lösungsvorschläge.
Der Autor bzw. die Autoren haben nicht den Anspruch, allgemeingültige Exempel zu entwerfen.
DIV vertikal zentrieren mit CSS
Wie kann man DIV -Container vertikal (und horizontal) zentrieren?
Zu diesem Thema sucht man oft vergeblich nach einer akzeptablen Lösung.
Im allgemeinen gibt es den Hinweis, einen DIV - Container mit fester Breite und Höhe zu erzeugen und ihn mit Hilfe negativer margin - Anweisungen auszurichten.
Das löst leider nicht das Problem, wenn die Höhe eines DIV - Containers noch nicht bekannt ist, weil sein Inhalt beispielweise dynamisch erzeugt wird.
Hier nun zwei valide Lösungen mit CSS.
Zwei Beispiele: Div - Container vertikal zentriert
<?xml version="1.0" encoding="UTF-8"?> <!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="de" lang="de">
<head>
<title>DIV-Container vertikal und horizontal zentriert mit CSS</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html ,body {height: 100%;width:100%;}
body {margin: 0 auto;background: #ffffff;text-align:center;}
#maintable, #maintable tr, #maintable td {height: 100%;border:0;margin:0 auto;}
#mainbox {margin:0 auto;background: #ff0000;padding: 20px;text-align:left;}
</style>
</head>
<body>
<table id="maintable">
<tr>
<td>
<div id="mainbox">
Hier steht dynamisch erzeugter Text.<br />
Die Box "wächst" mit dem Inhalt,<br />
bleibt aber vertikal und horizontal zentriert.<br /><br />
<div style="text-align:center;">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" style="border:0;width:88px;height:31px" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!" />
</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>DIV-Container vertikal und horizontal zentriert mit CSS</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html ,body {height: 100%;width:100%;}
body {margin: 0 auto;background: #ffffff;text-align:center;}
#maintable, #maintable tr, #maintable td {height: 100%;border:0;margin:0 auto;}
#mainbox {margin:0 auto;background: #ff0000;padding: 20px;text-align:left;}
</style>
</head>
<body>
<table id="maintable">
<tr>
<td>
<div id="mainbox">
Hier steht dynamisch erzeugter Text.<br />
Die Box "wächst" mit dem Inhalt,<br />
bleibt aber vertikal und horizontal zentriert.<br /><br />
<div style="text-align:center;">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" style="border:0;width:88px;height:31px" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!" />
</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Hier kann man dieses Beispiel aufrufen ( Beispiel 1 ).
Man erzeugt also eine Tabelle in voller Höhe und Breite mit nur einer Zelle.
Dieses Beispiel funktioniert in allen gängigen Browsern.
Diese Vorgehensweise dürfte meiner Meinung nach nicht gegen die Regeln der Barrierefreiheit verstoßen.
Hier noch ein zweites Beispiel (Beispiel 2).
In diesem Fall wird anstatt der Tabelle ein DIV-Container angelegt und durch "display:table" mit Tabelleneigenschaften angezeigt. Das eingeschlossene DIV hat mit "display:table-cell" die Eigenschaften einer Tabellenzelle und der Text kann vertikal ausgerichtet werden.
Manko: Leider klappt diese Variante mit dem IE erst ab Version 8.
In diesem Fall wird anstatt der Tabelle ein DIV-Container angelegt und durch "display:table" mit Tabelleneigenschaften angezeigt. Das eingeschlossene DIV hat mit "display:table-cell" die Eigenschaften einer Tabellenzelle und der Text kann vertikal ausgerichtet werden.
Manko: Leider klappt diese Variante mit dem IE erst ab Version 8.
<?xml version="1.0" encoding="UTF-8"?> <!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="de" lang="de">
<head>
<title>DIV-Container vertikal und horizontal zentriert mit CSS - Version 2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html ,body {height: 100%;width:100%;}
body {margin: 0 auto;background: #ffffff;text-align:center;}
#div_table {height: 100%;
display: table; text-align:center;margin: auto;}
#div_tablecell {display: table-cell; vertical-align: middle}
#mainbox {background: #0000ff;color:#ffffff;padding: 20px;text-align:left;}
</style>
</head>
<body>
<div id="div_table">
<div id="div_tablecell">
<div id="mainbox">
Hier steht dynamisch erzeugter Text.<br />
Die Box "wächst" mit dem Inhalt,<br />
bleibt aber vertikal und horizontal zentriert.<br /><br />
<div style="text-align:center;">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" style="border:0;width:88px;height:31px" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>DIV-Container vertikal und horizontal zentriert mit CSS - Version 2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html ,body {height: 100%;width:100%;}
body {margin: 0 auto;background: #ffffff;text-align:center;}
#div_table {height: 100%;
display: table; text-align:center;margin: auto;}
#div_tablecell {display: table-cell; vertical-align: middle}
#mainbox {background: #0000ff;color:#ffffff;padding: 20px;text-align:left;}
</style>
</head>
<body>
<div id="div_table">
<div id="div_tablecell">
<div id="mainbox">
Hier steht dynamisch erzeugter Text.<br />
Die Box "wächst" mit dem Inhalt,<br />
bleibt aber vertikal und horizontal zentriert.<br /><br />
<div style="text-align:center;">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" style="border:0;width:88px;height:31px" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
