nicht angemeldet molily
molily
Der Martin
molily
JürgenB
JürgenB
Gunnar Bittersmann
molily
molily
Hallo,
dass CSS, bzw. Umsetzung durch Browser, immer Probleme hatte mit vertikaler Zentrierung ist ja bekannt. Aus diesem und ein paar anderer CSS-Gründe bin ich nach wie vor Tabellenanhänger, wenngleich sich das bei mir prozentual im Lauf der Jahre und besserer Browserunterstützung etwas zugunsten CSS verschoben hat.
Nun stehe ich wieder vor so einem Dilemma, entweder Tabelle oder CSS. Ziel ist es einige "Boxen" nebeneinander zu zeigen und diese mit zentriertem Text (horizontal und vertikal). Dazu nutze ich (vereinfachter Beispielcode):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
*{margin:0;padding:0;}
div{
display:inline-block;
margin:10px;
padding:5px;
width:100px;
height:100px;
color:red;
border:3px solid navy;
text-align:center;
vertical-align:middle;
}
</style>
</head>
<body>
<div>text</div>
<div>text</div>
<div>text</div>
</body>
</html>
Nur leider ist der Text nicht vertikal zentriert, zumindest nicht im IE 10 oder FF Vers. 19.0.2.
Das kann doch nicht wahr sein, nach allen diesen Jahren, dass dies immer noch nicht geht.
Naja, wie auch immer, empfohlen wird auf diversen Seiten, das Ganze zu ändern in:
display:table-cell
Oh Wunder, anstatt direkt eine Tabelle zu nehmen, tue ich jetzt einfach so (also eine Krücke) und der Text ist tatsächlich zentriert. Doch was ist das? Dann haben die DIV-Blöcke keinen Abstand mehr zueinander und das trotz margin-Angabe.
Was mache ich nun, doch eine echte Tabelle nehmen oder gibt es eine sinnvolle CSS-Lösung?
Gruss
Mike
Hallo!
Was mache ich nun, doch eine echte Tabelle nehmen oder gibt es eine sinnvolle CSS-Lösung?
Ich bevorzuge eine Lösung mit flex-boxen.
Du hast aber auch noch eine größere Auswahl wenn du im Archiv nach "zentrieren" suchst. Dafür braucht man nun wirklich keine Tabelle.
Aus diesem und ein paar anderer CSS-Gründe bin ich nach wie vor Tabellenanhänger
Was sind denn diese ominösen "CSS-Gründe" die den Einsatz von Tabellen zu Layoutzwecken rechtfertigen? Vielleicht solltest du etwas von deinen Vorurteilen abrücken und dich näher mit CSS beschäftigen.
Grüße, Matze
Hallo
Das kann doch nicht wahr sein, nach allen diesen Jahren, dass dies immer noch nicht geht.
Doch. Das Problem ist eher, das du die Grundlagen und den Zweck von HTML/CSS nach so langer Zeit offensichtlich noch nicht verstanden hast.
HTML/CSS sind kein Tummelplatz für Designer sondern dienen in erster Linie der Informationsübermittlung flexibel auf möglichst viele Geräte. Dazu ist das Layout/Design nur viert- oder fünftrangig.
Die Entwicklung von HTML5 legt den Schwerpunkt eindeutig auf die Semantik und als zweites darauf, das möglichst viele Endgeräte die Informationen übermitteln können.
Das merkt man auch daran, das sich viele Seiten viel besser lesen lassen, wenn schlicht alle CSS-Angaben blockiert werden, mit denen die selbsternannten Designer ihre Besucher nerven.
Gruss
MrMurphy
Hallo!
HTML/CSS sind kein Tummelplatz für Designer
Ach nein? Weil du festgelegst, wer HTML und CSS wie nutzen darf?
sondern dienen in erster Linie der Informationsübermittlung flexibel auf möglichst viele Geräte. Dazu ist das Layout/Design nur viert- oder fünftrangig.
CSS ist nichts anderes als eine Sprache fürs Layouten und Formatieren von Markup-Dokumenten. Eine mittlerweile sehr mächtige Sprache. CSS *ist* ein Design-Tool. CSS übermittelt selbst keine Informationen, sondern definiert Regeln für die Darstellung der HTML-Inhalte. Layout und Design sind nicht nachrangig, sondern entscheidend wichtig für die erfolgreiche Webkommunikation.
Mathias
sondern dienen in erster Linie der Informationsübermittlung flexibel auf möglichst viele Geräte. Dazu ist das Layout/Design nur viert- oder fünftrangig.
Layout und Design sind nicht nachrangig, sondern entscheidend wichtig für die erfolgreiche Webkommunikation.
Da dürfen jetzt aber alle mal laut lachen. Nicht, weil deine Ansicht in der Theorie falsch wäre, sondern weil sich der größte Teil der Verantwortlichen in der Praxis einen feuchten Furz um die "erfolgreiche Webkommunikation" zu scheren scheint. Der Begriff ist, so gesehen, schon fast ein Kästchen fürs Bullshit-Bingo.
Eigentlich solltest du wissen und erkennen, aus welcher Ecke die in Murphys Beitrag nur mühsam unterdrückte Abneigung gegen "Designer" kommt.
Hola Mike
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
[code lang=css]div {
display: table;
border-spacing: 3px;
border-collapse: separate;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
margin: 10px;
padding: 5px;
width: 100px;
height: 100px;
border: 3px solid navy;
}
</style>
</head>
<body>
<div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</body>
</html>[/code]
gegen Tabellen spricht nicht, wenn es der Zweck erfordert, also tabelarische Daten, für Layout-technische Lösungen ist doch CSS geradezu genial.
gruß quincunx
Hallo,
Naja, wie auch immer, empfohlen wird auf diversen Seiten, das Ganze zu ändern in:
display:table-cell
Du solltest schon verstehen, was das überhaupt tut.
Wenn du einem Element display: table-cell gibst, werden anonyme Container-Boxen mit display: table, display: table-row-group und display: table-row erzeugt, genau wie bei einer HTML-Tabelle mit table, tbody, tr und th/td. In CSS-Hinsicht verhält sich die Box dadurch wie die einer normalen Tabellenzelle.
Dann haben die DIV-Blöcke keinen Abstand mehr zueinander und das trotz margin-Angabe.
Da dir Tabellen bekannt sind, könntest du wissen, dass Tabellenzellen keine Margins haben, sondern der Abstand zwischen den Zellen mit cellspacing (HTML-Attribut) bzw. border-spacing (CSS-Eigenschaft) geregelt wird. Daher wird die margin-Angabe logischerweise ignoriert.
Würdest du hier eine HTML-Tabelle verwenden, hättest du das Problem mit den Abständen auch nicht gelöst.
Du kannst hier weitere Elemente einfügen, um margins + table-cell zu nutzen:
<ul>
<li>
<div>Content</div>
</li>
<li>
<div>Content</div>
</li>
<li>
<div>Content</div>
</li>
</ul>
li { margin: 10px; }
div { display: table-cell; }
Wie du hier die li-Boxen nebeneinander bekommst, ist beliebig. Du kannst display: inline-block, float: left oder sonst etwas verwenden.
Du kannst natürlich auch eine Tabelle mit border-spacing verwenden. Dann benötigst du ein Containerelement, dem du display: table gibst – wie bei HTML-Tabellen.
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
ul { display: table; border-spacing: 10px; }
li { display: table-cell; }
Das ist beides nicht CSS 3, sondern stinknormales CSS 2.1. Im Rahmen von CSS 3 gibt es z.B. Flexbox, welches von neueren Browsern unterstützt wird.
Beispiel: http://dabblet.com/gist/8270383
Hier müssen ggf. noch Vendor-Prefixes eingefügt werden. Auf Dabblet.com erledigt das ein JavaScript namens Prefixfree.
Grüße
Mathias
Nun stehe ich wieder vor so einem Dilemma, entweder Tabelle oder CSS. Ziel ist es einige "Boxen" nebeneinander zu zeigen und diese mit zentriertem Text (horizontal und vertikal). Dazu nutze ich (vereinfachter Beispielcode):
div{
display:inline-block;
margin:10px;
padding:5px;
width:100px;
height:100px;
color:red;
border:3px solid navy;
text-align:center;
vertical-align:middle;
}
<div>text</div>
Nur leider ist der Text nicht vertikal zentriert,
Warum sollte er auch, du hast ihn nirgends vertikal zentriert, jedenfalls nicht vertikal in deinen Kästchen.
vertical-align bezieht sich bei Blockelementen seit jeher auf die Elemente einer Zeile. Wenn du ein fünf Zeilen hohes Bild in eine Zeile setzt, dann wird der Text bei vertical-align:middle mittig an das Bild gesetzt:
blafasel <img> dingsbumms<br>
noch eine zeile
ergäbe dementsprechend
+---------+
| |
blafasel | Bild | dingsbumms
| |
+---------+
noch eine zeile
Willst du deinen Kästcheninhalt selbst mittig haben, dann muss, erstens, das äußere Kästen eine Zeilenhöhe (line-height) in der Größe des Kästchens (height - padding) bekommen, damit das Kästchen nur eine Zeile enthält, in der mit vertical-align zentriert werden kann. Zweitens muss der Inhalt zusammengefasst und als Zeilenelement ausgezeichnet werden, also display:inline-block.
<head>
<style>
div.aussen {
display:inline-block;
padding:5px;
width:100px;
height:100px;
line-height:90px;
border:1px solid red;
vertical-align:middle;
text-align:center;
}
div.aussen > div {
display:inline-block;
} border:1px solid blue;
</style>
</head>
<body>
<div class="aussen"><div>text</div></div>
<div class="aussen"><div>text</div></div>
<div class="aussen"><div>text</div></div>
</body>
Das wäre dann die Fassung für alte Browser. Dass CSS3 mitnichten ein Problem mit vertikaler Zentrierung hat, wurde dir ja schon mehrfach mit dem Hinweis auf das durchaus breit unterstützte Flexbox-Prinzip deutlich gemacht.
zumindest nicht im IE 10 oder FF Vers. 19.0.2.
Das kann doch nicht wahr sein, nach allen diesen Jahren, dass dies immer noch nicht geht.
Vielleicht solltest du auch "alle paar Jahre" mal deinen Browserpark aktualisieren. Firefox 19 hat schon ein paar Tage auf dem Buckel und der IE 10 ist auch von gestern.
Hallo,
Warum sollte er auch, du hast ihn nirgends vertikal zentriert, jedenfalls nicht vertikal in deinen Kästchen.
vertical-align bezieht sich bei Blockelementen seit jeher auf die Elemente einer Zeile. Wenn du ein fünf Zeilen hohes Bild in eine Zeile setzt, dann wird der Text bei vertical-align:middle mittig an das Bild gesetzt:
alles klar, line-height anstatt height bringt das gewünschte Ergebnis. Die Logik dahinter würde mich noch interessieren, nicht weshalb es dann funktioniert(das hast Du ausreichend erklärt: Zentrierung innerhalb Zeile), sondern warum das so(zeilen-anstatt block/containerbasierend) angedacht ist?
Vielleicht solltest du auch "alle paar Jahre" mal deinen Browserpark aktualisieren. Firefox 19 hat schon ein paar Tage auf dem Buckel und der IE 10 ist auch von gestern.
Sooo alt ist der IE10 auch noch nicht und ich hinke absichtlich minimal etwas hinterher damit ich das nutze was auch die Mehrheit nutzt. In diesem Zusammenhang wollte ich jetzt mal prüfen was die aktuelle Browserstatistik so hergibt. Allerdings kommt einem dann beim Besuch diverser Seiten der altbekannte Spruch "...traue keiner Statistik, die du nicht selbst gefälscht hast..." in den Sinn, denn zb. "Safari ca. 30%" halte ich doch für etwas übertrieben. Realitätsnäher finde ich da schon: IE ca. 50%
Gruss und Dank an alle,
Mike
Hallo,
»»denn zb. "Safari ca. 30%" halte ich doch für etwas übertrieben. Realitätsnäher finde ich da schon: IE ca. 50%
Genau umgekehrt.
Safari sind die ganzen mobilen Appel-Geräte (iPad, iPhone).
Die Angaben zum IE sind eher mit Mißtrauen zu betrachten, da sich aus historischen Gründen viele Browser als IE ausgeben (können) und ihre wahre Identität verbergen.
Gruss
MrMurphy
Moin,
und der IE 10 ist auch von gestern.
das mag sein, aber auch den IE8 von vorgestern sollte man noch nicht vergessen. Immerhin ist er der "neueste" IE, den man unter Windows XP haben kann, und XP ist immer noch sehr verbreitet, Support-Ende hin oder her.
"Safari ca. 30%" halte ich doch für etwas übertrieben. Realitätsnäher finde ich da schon: IE ca. 50%
Zum hohen IE-Anteil hat MrMurphy ja schon etwas gesagt; der hohe Safari-Anteil hätte mich auch verblüfft, aber klar, wenn man die ganzen Eiergeräte bedenkt (Ei-Fon, Ei-Pad, Ei-Gelb) ...
So long,
Martin
Hallo,
alles klar, line-height anstatt height bringt das gewünschte Ergebnis. Die Logik dahinter würde mich noch interessieren, nicht weshalb es dann funktioniert(das hast Du ausreichend erklärt: Zentrierung innerhalb Zeile), sondern warum das so(zeilen-anstatt block/containerbasierend) angedacht ist?
Ich verstehe deine Frage nicht ganz. line-height ist hier aber auch nur ein Hack; ein schlechterer als display: table-cell meiner Meinung nach.
line-height ist nicht dazu gedacht, Text vertikal im umgebenden Element zu zentrieren. Es soll zunächst einmal die typografische Zeilenhöhe regeln. Es für die Zentrierung zu benutzen ist unschön: Zunächst einmal muss man die Höhe hartkodieren und hat somit zwei Stellen, die man bei der Höhenänderung anpassen muss. Ferner kann der Text in dem Element nicht zweizeilig sein, denn eine zweite Zeile würde dazu führen, dass der Text die Box verlässt. In der Regel kann man nicht garantieren, dass ein wechselnder Text auf allen Geräten in einer Zeile gesetzt wird.
display: table-cell und vertical-align: middle ist viel flexibler und hat solche Nebenwirkungen nicht. Diese Lösung sowie Flexbox wurde ja auch mehrfach gezeigt.
Mathias
Hallo,
Ich verstehe deine Frage nicht ganz. line-height ist hier aber auch nur ein Hack; ein schlechterer als display: table-cell meiner Meinung nach.
bei tabel-cell habe ich wie schon beschrieben das Problem der Abstände zueinander. Klar lässt sich das, wie von Dir beschrieben lösen. Doch dann bin ich wieder am Ausgangspunkt und kann eigentlich auch gleich eine Tabelle nehmen.
...Ferner kann der Text in dem Element nicht zweizeilig sein, denn eine zweite Zeile würde dazu führen, dass der Text die Box verlässt...
Da hast Du recht, glücklicherweise benötige ich nur eine Zeile im Container. Deshalb reicht bei meinem Code die height-Angabe durch line-height zu ersetzen, wobei ich das natürlich auch nur als Krücke/Hack ansehe, doch mit dem Erfolg diesen MinimalHTMLCode zu haben:
...
<body>
<div>text</div>
<div>text</div>
<div>text</div>
</body>
...
Verschachtel ich das Ganze, kann ich auch eine Tabelle nutzen:
[code lang=html]
...
<table>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
...
~~~[/code]
> display: table-cell und vertical-align: middle ist viel flexibler und hat solche Nebenwirkungen nicht. Diese Lösung sowie Flexbox wurde ja auch mehrfach gezeigt.
>
Ja funktioniert aber nur wenn ich mir eine Art Pseudotabelle bastele, wie in deinen Beispielen. Flexbox ist nicht empfehlenswert, mangels ausreichender Browserunterstützung. [Hier](http://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/) funktioniert bei mir keines der Demos.
Gruss
Mike
Hallo Mike,
bei tabel-cell habe ich wie schon beschrieben das Problem der Abstände zueinander. Klar lässt sich das, wie von Dir beschrieben lösen. Doch dann bin ich wieder am Ausgangspunkt und kann eigentlich auch gleich eine Tabelle nehmen.
warum? Du brauchst nur ein div als table, darin eins als table-cell.
Siehe z.B. http://www.j-berkemeier.de/ShowGPX.html
-> Beschreibung: Text zentriert
-> Parameter ändern: vier Spalten Inputs zentriert
Gruß, Jürgen
Hallo,
...und kann eigentlich auch gleich eine Tabelle nehmen.
warum? Du brauchst nur ein div als table, darin eins als table-cell.
also eine Verschachtelung und ein Pseudotabelle(wie sich ja auch schon aus den Display-Eigenschaften ergibt) und wie molily bereits beschrieben hat. OK, ich mache es nun so ;-)
Siehe z.B. http://www.j-berkemeier.de/ShowGPX.html
-> Beschreibung: Text zentriert
-> Parameter ändern: vier Spalten Inputs zentriert
Keine Ahnung, was das für eine Seite ist und was eine GPS damit zu tun hat.
Gruss
Mike
Hallo Mike,
Keine Ahnung, was das für eine Seite ist und was eine GPS damit zu tun hat.
die beiden Blöcke, die bei Klick auf "Beschreibung" und "Parameter Ändern" erscheinen, sind horizontal und vertikal zentriert. Sorry, dass ich keine Testseite anbieten kann.
Gruß, Jürgen
@@Mike:
nuqneH
[…] und kann eigentlich auch gleich eine Tabelle nehmen.
Nö. Was per CSS als Tabelle _visuell_ dargestellt wird, muss noch lange keine Tabelle sein. Und schon gar nicht anderweitig als Tabelle ausgegeben werden, bspw. von Screenreadern.
Und wenn man schon table-Elemente zum Layouten missbraucht, sollte man dies per <table role="presentation"> kennlich machen. Aber besser ist, table nur für tabellarische Daten zu verwenden.
Qapla'
Hallo,
Klar lässt sich das, wie von Dir beschrieben lösen. Doch dann bin ich wieder am Ausgangspunkt und kann eigentlich auch gleich eine Tabelle nehmen.
Aus HTML-Tabellen strukturieren Daten, indem sie sie in einer bestimmte Relation zueinander setzen. Daher gibt es Captions, Header, Footer, Header- und Inhaltszellen. Normale Zellen haben zugeordnete Headerzellen (explizit mit scope- bzw. headers-Attributen). Für jede Zelle lassen sich also maschinenlesbar Beschriftungen finden, sodass Zuordnungen wie »im Jahr 2010 exportierte China Waren und Dienstleistungen im Wert von 4,5 Milliarden Dollar in die EU« (Phantasiezahl) möglich sind.
Aus CSS-Sicht ist display: table, table-row und table-cell einfach ein weiterer Layouting-Mechanismus. Natürlich orientieren sich dessen Möglichkeiten an den Erfordernissen der oben beschriebenen Datentabellen. Wenn ich aber irgendeinem Element display: table oder display: table-cell gebe, wird es bloß entsprechend dargestellt, hat es noch lange nicht die oben beschriebene Semantik.
Das ist der fundamentale Unterschied zwischen HTML-Tabellen und CSS-Tabellenlayout. Wenn ich Daten tabellarisch strukturieren will, dann und nur dann sollte ich HTML-Tabellen verwenden. Wenn ich einfach nur Boxen tabellentypisch anordnen will, so kann ich display: table und Co. verwenden.
Flexbox ist nicht empfehlenswert, mangels ausreichender Browserunterstützung.
Das ist m.E. ein unpassender Ansatz für die Webentwicklung. Dutzende Techniken werden nicht oder nur mangelhaft in den relevanten Browsern unterstützt. Sie sind nichtsdestoweniger nützlich und empfehlenswert, man muss sich nur über einen sinnvollen Fallback Gedanken machen. Ein besserer Ansatz ist Progressive Enhancement.
Hier funktioniert bei mir keines der Demos.
»Bei mir« heißt welcher Browser?
Wie dort auch angemerkt wird, verwenden die Beispiele nur die finale Syntax, Webkit-Präfixes und sind nicht mit älteren Implementierungen kompatibel. Das lässt sich verbessern.
Mathias
Hallo Mathias,
Flexbox ist nicht empfehlenswert, mangels ausreichender Browserunterstützung.
Das ist m.E. ein unpassender Ansatz für die Webentwicklung. Dutzende Techniken werden nicht oder nur mangelhaft in den relevanten Browsern unterstützt. Sie sind nichtsdestoweniger nützlich und empfehlenswert, man muss sich nur über einen sinnvollen Fallback Gedanken machen. Ein besserer Ansatz ist Progressive Enhancement.
ich sehe das anders. Ich muss nicht auf "Teufel komm raus" jedes neue Feature bei meinen Projekten etablieren. Nehmen wir doch mal so etwas wie die Transitions, super Sache und werde ich bestimmt auch nutzen sobald Browser < IE10 nur noch marginal von Interesse sind. Klar, bis dahin könnte ich das trotzdem nutzen und die entsprechenden Browser mit einer entsprechenden JS-Alternative zufrieden stellen. Doch wofür? Nehme ich doch gleich die JS-Variante und erspare mir diese Filterung.
Ich bin da zugegebenermaßen sowieso etwas sonderbar, ich nutze, wie viele hier, HTML schon bevor es CSS gab und liebe es noch heute, wenn eine Seite allein aufgrund Ihrer Elemente schon ein visuell strukturiertes Design abgibt, dass durch CSS lediglich aufgehübscht wird. Doch mittlerweile ist dem ja nicht mehr so und so schwimme ich natürlich auch in dem CSS-Strom, was ja auch durchaus Vorteile hat.
Hier funktioniert bei mir keines der Demos.
»Bei mir« heißt welcher Browser?
Gruss
Mike
Hallo!
Dein Beispiel ist in der Tat passend. Man kann Transitions sehr einfach verwenden, um in neueren Browsern eine performante Animation umzusetzen.
Das Schöne ist: In Browsern, die sie nicht unterstützen, braucht man oft einfach gar nichts zu machen. Dann fehlt der Effekt dort eben. Anstatt einem animierten Übergang gibt es einen springenden Übergang. Das ist oftmals in Ordnung und führt nicht dazu, dass die User-Experience geschmälert wird.
Selbst wenn man die Animation für wichtig hält, ist es sinnvoll, sie in neueren Browsern auch mit CSS-Transitions umsetzen. Einfachere und performantere (hardwarebeschleunigte) Animationen bekommt man mit JavaScript nämlich nicht hin. Schon einmal versucht, eine ruckelfreie Animation für Mobilgeräte umzusetzen? Das ist mit JavaScript selbst mit requestAnimationFrame nicht möglich.
Es lohnt sich einfach, neueren Browsern auch neuere Techniken vorzusetzen. Dadurch wird die Seite besser. Es macht keinen Sinn, ihnen alte Technik vorzusetzen, nur weil es auch ältere Browser gibt. Genau das ist Progressive Enhancement.
IE 10 implementiert eine ältere, vom Umfang her ausreichende Spezifikation von Flexbox mit -ms-Präfixen, kann das also im Prinzip.
Mathias
vertical-align bezieht sich bei Blockelementen seit jeher auf die Elemente einer Zeile. Wenn du ein fünf Zeilen hohes Bild in eine Zeile setzt, dann wird der Text bei vertical-align:middle mittig an das Bild gesetzt:
alles klar, line-height anstatt height bringt das gewünschte Ergebnis. Die Logik dahinter würde mich noch interessieren, nicht weshalb es dann funktioniert(das hast Du ausreichend erklärt: Zentrierung innerhalb Zeile), sondern warum das so(zeilen-anstatt block/containerbasierend) angedacht ist?
vertical-align existiert, damit Bilder in einer Zeile, wie beschrieben, anständig ausgerichtet werden können – da lässt sich eigentlich nicht viel zu sagen und ich bin mir ziemlich sicher, dass du irgendwann auch schon mal einen Fall hattest, wo das von Nöten war.
Mir fallen im Moment nur diese unsäglichen Smileys ein, mit denen sich in diversen Boards das Geschreibsel verschlimmbessern lässt. So ein Kringel sollte vielleicht mittig zum Text liegen und zwar …
o
o ooo
so ooo und nicht so o oder so o
o ooo
o
Falls du dich hingegen wunderst, dass es keine vertikale Zentrierung eines Blocks gab: Das ist halt so. Ich kann mich auch noch an Zeiten erinnern, in denen man Blockelemente nicht einmal horizontal zentrieren konnte, obwohl das in CSS vorgesehen ist (mit margin, nicht text-align, text-align wirkt wie vertical-align auch nur auf die Zeile); die Browser haben das oftmals nicht hinbekommen.