<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zentriertes block-Element - Cascading Style Sheets - Workshop Internet-Präsenz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="DE" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Übung Cascading Style Sheets. Zentriertes block-Element." /> <meta name="keywords" content="HTML, Cascading Style Sheets" /> <meta name="author" content="Roland Unger" /> <style type="text/css"> <!-- body { text-align: center; } body * { text-align: left; } table { margin: 1em auto; width: 50%; border-collapse: collapse; } td { border: 1px solid #000; padding: 0.5em; } --> </style> </head> <body> <h1>Workshop Internet-Präsenz</h1> <h2>Zentriertes block-Element - Cascading Style Sheets</h2> <p>Nachfolgendes Beispiel zeigt die Möglichkeit, Tabellen und block-Elemente zentriert darzustellen. Dazu müssen der linke und rechte Randbereich den Wert <em>auto</em> erhalten. Z.B.</p> <pre> margin: 1em auto;</pre> <table summary="Datentabelle"> <tbody> <tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> </tbody> </table> <p>Es kann gelegentlich beim Internet Explorer 5 und 6 vorkommen, dass dennoch keine Zentrierung erfolgt. Es hilft dann, dass das übergeordnete Element die Textausrichtung zentriert erhält. Häufig gelingt das erst, wenn ein weiteres div-Tag zum Umschließen eingefügt wird. Es hilft aber auch sinngemäß folgende Ergänzung:</p> <pre> body { text-align: center; } body * { text-align: left; } </pre> <p>Die zweite Anweisung sorgt dafür, dass alle im body-Tag eingebetteten Tags die Ausrichtung linksbündig, also nicht zentriert, erhalten. Die beiden Anweisungen sollten am Anfang notiert werden, um spätere Modifikationen der Textausrichtung nicht zu überschreiben.</p> </body> </html>