Vertikal zentrieren in CSS 14. September 2006 um 08:26 Uhr / Webdesign
Jedes mal wenn mich jemand nach einer Möglichkeit unbekannt hohe Inhalte vertikal zu zentrieren fragte habe ich automatisch die SELFHTML FAQ verwiesen, wo gezeigt wird, wie man mittels einer Layouttabelle das ganze lösen kann. Doch jetzt wurde eine CSS-only Möglichkeit vorgestellt.
Du¨an Janovský beschreibt in Vertical Centering in CSS — Yuhu's Definitive Solution with Unknown Height wie man dazu vorgehen kann.
Er bedient sich display: table;
und display: table-cell;
für die Standardbasierten Browser und hilft dem IE auf die Sprünge indem er die Falschinterpretation von height
des IE dazu nutzt die "richtige" Position hinzubekommen.
Das war eine der Sachen die mich schon sehr lange genervt haben, und wo ich dann auch ganz pragmatisch Layouttabellen benutzt habe. Es freut mich doch sehr, dass, zwar sehr sehr selten, aber dennoch, es doch noch Entdeckungen in CSS gibt wie diese und es erinnert mich an meine Anfangszeit, in der fast monatlich revolutionäre CSS-Techniken aufkamen.
Pingbacks
- Sascha Goebels WebLog » Blog Archive » Vertikal Zentrieren mit CSS
- DEVSTER » Blog Archive » Anleitung Bloggen, 1: Greife bedeutende Themen auf!
Kommentare
Die Kommentare sind für diesen Eintrag geschlossen.
rico aus dresden schrieb am 14.09.2006
na endlich - nicht nur du warst davon genervt ;o)
Anonym schrieb am 14.09.2006
Also anstatt table inzuschreiben macht man ein div zum table? Inwiefern ist das besser? Semantisches Markup ist das nicht.
Jeena Paradies aus Varberg schrieb am 14.09.2006
Niemand sagt, dass das nur mit DIVs geht.
wahsaga schrieb am 15.09.2006
@Anonym:
(Wieso finde ich das nur wieder mal so typisch, dass so ein plakativ-unfundiert-"kritischer" Kommentar anonym kommt?)
Dieses CSS solltest du - mit ein wenig Ahnung - auch auf "semantisches" Markup angewendet bekommen.
Und es "macht" nicht ein Element zur Tabelle, sondern stellt es mit den für diesen Effekt wesentlichen Eigenschaften einer Tabelle dar.
Wenn dir der Unterschied zwischen Struktur und Darstellung noch nicht klar ist - dann solltest du in Punkto Hinweise bzgl. Semantik vielleicht lieber Zurückhaltung üben.
MCC schrieb am 15.09.2006
Jeena Paradies aus Varberg schrieb am 15.09.2006
Stimmt, Tatsache. Aber anscheinend ist die Methode nicht wirklich bekannt, sonst hätte ich zumindest schon einmal über diesen Artikel stolpern müssen, dies war nicht der Fall. Danke für die zwei anderen Links MCC.
Detlef G. schrieb am 16.09.2006
Die von dir verlinkte Methode zeichnet sich im Vergleich zu der von MCC dadurch aus, dass sie sehr einfach ist. Sie hat aber den Nachteil, dass bei großem zentrierten Inhalt und/oder kleinen Browserfenstern Inhalte oben im IE unerreichbar abgeschnitten werden können. So bleibt es dabei, dass es keine Universallösung gibt, und je nach Seiteninhalt eine der verschiednenen Varianten gewählt werden muss.
Was mich allerdings wundert, dass du CSS vertical centering using float and clear noch nicht kanntest. Es ist doch auch bei Zentrieren mit nur einem Element mit verlinkt.
Jeena Paradies aus Varberg schrieb am 16.09.2006
Ja, mich ja eben auch :-)
Urs Felix aus Deutschland schrieb am 19.09.2006
Danke für die Links, hab es bisher immer selbst probiert aber meine Methode war nie zu allen Browsern kompatibel.
Gruß, Urs
Steffen aus Königs Wusterhausen Deutschland schrieb am 30.01.2007
Robert aus D schrieb am 07.03.2007
Jeena Paradies aus Varberg schrieb am 08.03.2007