Vertikal und horizontal zentrieren ohne Tabelle

Hin und wieder finde ich noch das Gerücht, dass man ein einzelnes Wort, ein Bild oder eine einzelne Zeile nur dann vertikal zentrieren kann, wenn man ganz genau weiß wie breit denn die Box sein wird, die dieses Wort beinhaltet. Manchmal wird dieses Gerücht sogar als Argument für ein Tabellenlayout verwendet.

Am 19.01.07 also heute fand ich in einem Kommentar ² den Hinweis, dass dies mit Bildern nicht funktioniert und dies so ein Minus für CSS sei. Nun Märchen und Mythen räume ich gerne aus,daher habe ich diesen Artikel um Beispiele mit Bildern ergänzt. :zwinker:

Vertikal zentrieren ist möglich, ohne genaue Massangaben – ganz im Gegenteil diese wären sogar hinderlich. 😉

Seit undenklichen Zeiten habe ich dieses
CSS
Schnippsel auf meiner Festplatte. Wenn jemand weiß wer dies erfand, bitte melden, gerne zitiere ich.

vertikal zentrieren
<div style="line-height:250%;
width:auto;
border:1px solid #cacaca;">
vertikal zentriert
</div>


Vertikal und horizontal zentrieren:

vertikal und horizontal zentriert
<div style="line-height:250%;
width:auto;
border:1px solid #cacaca;
margin:1em 20%;
text-align: center;">
vertikal und horizontal zentriert
</div>

Bilder vertikal und horizontal zentrieren

In diesen Beispielen nehme ich immer ein und dasselbe Bild. Ändere nur dessen Breite und Höhe, das der Bildqualität nicht unbedingt gut tut, aber als Anschauungsmaterial gut nützlich ist. 😉

Vertikal und horizontal zentriertes Bild
Wald 128-128

Ohne Text:

Wald 128-128

Das Bild an sich kann man ja per CSS vertikal zentrieren, dies konnte man immer schon und auch hier. Also muss – so wie immer schon- dem Bild nicht dem div mitgeteilt werden, dass es sich vertikal zentrieren soll. So sieht dann der Quelltext aus:

<div style="line-height:250%;
width:auto;
border:1px solid #cacaca;
margin:1em 20%;
text-align: center;">
<img id="image535" style="vertical-align:middle;" 
src="http://www.webdesign-in.de/wp-content/uploads/wald.png" 
alt="Wald 128-128" height="96" width="96" />
</div>

Die Angabe für das Bild extra:

<img style="vertical-align:middle;" ....

Hier änderte ich die Höhe und die Breite des Bildes, um diese Technik nochmals zu präsentieren:

Wald 128-128

Der Quelltext:


<div style="line-height:250%;
width:auto;
border:1px solid #cacaca;
margin:1em 20%;
text-align: center;">
<img id="image535" style="vertical-align:middle;" 
src="http://www.webdesign-in.de/wp-content/uploads/wald.png" 
alt="Wald 128-128" height="10" width="196" />
</div>
mts

~~~~

Dieser Artikel wurde am 18.07.06 um 15:42 das erste Mal veröffentlicht und aufgrund eines Kommentares Nr 8 am 19.01.2007 ergänzt und neuerlich öffentlich gemacht.


Ebenfalls informativ und lesenswert

63 Kommentare zu “Vertikal und horizontal zentrieren ohne Tabelle

  1. Webdesign Köln Group

    Das über „line-height“ habe ich vor Kurzem erfahren, das fehlte mir immer früher.. 🙁

  2. joe johnson

    !! achtung !!
    das geht aber nicht mit bildern/grafiken, obwohl das im text so drinsteht. habe bis jetzt auch keine vernünftige möglichkeit gefunden.
    sehr schade und ein großes minus für css…

  3. mts

    Wini Danke

    doch irgendwie gehts da um was anders,
    außerdem der Kommentar von joe jonson wurde ja widerlegt von mir,

    und dies funktioniert sogar im Mac 😉

    Layouts hat die Layoutgala auch 😉

    lg

  4. Ronny

    Hallo,

    ganz so einfach geht es nicht, Text (nur) per line-height vertikal zu zentrieren. Sobald du dem umschließenden DIV eine feste Höhe gibst, funktioniert der Trick nur noch in Verbindung mit einem anderen Trick.

    Du musst die Schriftgröße prozentual ins Verhältnis zur DIV-Höhe setzen. Angenommen man verwendet eine 12px hohe Schrift und hat ein 150px hohes DIV, so muss eine line-height von 1250% notiert werden. (150px / 12px * 100%).

    Gruß, Ronny

  5. mts

    Hi Ronny

    1. schrieb ich , dass eine *fixierte * Größe hinderlich ist,

    2. Du hast Recht, ich vergaß eindeutig zu schreiben,dass man Schriftgrößen nicht auf px fixiert 😉

    denn
    3. das ist absolut userunfreundlich

    danke Dir, dass Du mich daran erinnert hast

    :zwinker:
    lg

  6. joe johnson

    das ist ein ganz ganz böser und dreckiger workaround (bitte meine ausdruckweise nicht übel nehmen).

    was ich mit dem großen minus für css meinte war, dass man einer div-box nicht einfach einen vertical-align zuweisen kann und man das erhält was man erwartet.
    und was passiert, wenn der text umbricht muss ich euch sicherlich nicht sagen.

    ich schreibe gerade eine software für eine bildagentur. was auch mein erstes projekt in css ist. wie der name schon sagt kommen da ganz, ganz viele bilder vor. und ich muss sagen ich musste noch nie so viel „frickeln“ und noch nie so viele kompromisse eingehen. pixelgenaue ausrichtung kann ma da vergessen (zumindest wenn man für mehrere browser optimiert).

    bitte versteht mich nicht falsch. ich habe mich voller freude in css gestürzt, musste aber nach und nach feststellen, dass es sehr oft nicht das macht was es soll.
    komplexe projekte mit komplexem design/layout lassen sich nicht in zufriedenstelendem maße realisieren.
    schade….ist aber so. (wirklich schade, denn die idee, die dahinter steckt ist klasse!!)

    grüße,
    joe

  7. René

    Vielen Dank für das wiederfinden dieses Code-Schnipsels… ich habe es bisher nie geschafft, Inhalte in DIVs vertikal zu zentrieren… Endlich, endlich geht dies nun!

    Sagte ich eigentlich schon Danke!? 😉

  8. mts

    joe johnson

    das Internet ist kein Buchdruck,
    pixelgenau wofür?
    für eine Bildschirmauflösung von 800px breite bis 2400px Breite?
    ob Tabellenlayout oder CSS, Bilder vektorisieren hat seine Grenzen die nichts mit CSS zu tun haben.

    Ich mache dennoch pixelgenaue Designs und ich frickele nicht.

    http://www.csszengarden.com/tr/deutsch/
    das da ist nicht von mir, aber tausende haben da bereits gezeigt was mit CSS möglich ist.

    Du magst frustriert sein, keine frage,
    doch jedes Design ist per CSS umsetzbar,
    und auch so, dass es in allen Browsern gut aussieht und gut benutzbar ist.

    *Gleich* aussehen muss es nicht, kann es nicht, sah es auch nicht bei Tabellenlayouts aus, weil Web-Design nicht Print-Design ist und niemals war.

    Mit einer URL-Testlauf von mir aus- könnt ich Dir helfen, ohne ist alles nur Spekulation;)

    @ Rene
    gern geschehen 🙂

    lg

  9. turbo

    hallo bei funkoniert das nicht was mus ich beachten? würd das gerne umsetzen. wäre lieb wenn sich mal jemand bei mir melden könnte oder hier dazu stellung nehmen könnte.

    viele grüsse aus koeln
    2freesms.de
    webmaster{ät}2freesms.de

  10. Sven H

    Hallo,

    der Code funktioniert definitiv nicht. Programmiere gerade auch eine Bilderdatenbank …

    Schade eigentlich, aber Bilder lassen sich einfach nicht vertikal zentrieren im Gegensatz zu Text.

    Gruß
    Sven.

  11. Sven H

    :: Nachtrag ::

    Im IE7 funktioniert der Code, im Firefox 2.0.0.2 leider nicht 🙁

    Habe das ganze Netz schon durchsucht und es gibt einfach keine Möglichkeit, in einem div mit fester Höhe (200px), ein Bild mit einer unbekannten Höhe, vertikal zu zentrieren…

    Gruß
    Sven.

  12. marcel

    salve,
    als css anhänger bin ich um jeden tipp froh, besten dank
    marcel

  13. Marc

    Hi,
    ich bin beim googeln zum Thema auf diesen Blogeintragen gestossen und war froh endlich eine Loesung gefunden zu haben. Leider scheint die Ausrichtung nicht ganz exakt zu sein.

    Ich habe beim testen des ersten Bsp. (text only) schon das Problem das eben keine saubere Ausrichtung in der Mitte passiert (Firefox 2.0.0.3).
    Beim obigen Bsp. faellt das nicht auf, erst wenn man den Font auf Arial setzt & line-height etwas reduziert (120%).

    Die Schrift hat nicht denselben Abstand zum oberen Rand wie zum unteren.

    Woran liegt’s ?

  14. mts

    Hi Marc

    line-height ist immer in Bezug zur verwendeten Schriftgröße.

    Es muss ein relativ großes line-height verwendet werden, weil jede Schrift unterschiedlich lange Oberlängen hat, die *drücken* dann, schieben und zerren am line-height – naja vielleicht nicht die wissentschaftslichste Erklärung -Drucker- werden mir hoffentlich verzeihen, die können dies besse erklären..;)

    Dazu kommt, dass dann padding ja ebenfalls relativ zu den Größen das Maß sich holt.

    Mit line-height 120 hat grade die Schrift genug Platz – die kann sich aber dann nicht mehr zentrieren.

    lg

  15. Marc

    Hi,

    das war ja eine schnelle Antwort, danke 🙂

    Ich habs grade mal Pixelweise nachgemessen bei einer line-height mit 300%, der Fehler bleibt.

    Die Hoehe bei line-height spielt wohl keine Rolle.
    (Zumindest was meine 120% betrifft, bei kleineren mag das sein)

    Soweit ich weiss wird padding ja beim berechnen der box „draufgerechnet“, und nicht in die Hoehe einbezogen, vergroessert sie somit also. Oder hab ich dich da falsch verstanden? Aber egal, ich habe eh kein padding angegeben.

    verwirrte Gruesse 😉

  16. mts

    *wo ist der rotwerd smilie*

    meinte margin….

    wieso es dann bei mir hier funktioniert und auch bei anderen Projekten von mir und bei Dir nicht —
    ..
    ….
    ..
    keine Ahnung…
    lg 😉

  17. Marc

    *seufz* ich auch nicht. Wenn du magst kannst du ja mal Pixel zaehlen 😉 Hier mein Code:
    Eine Zeile
    (Nur diese Zeile in ein leeres File reicht schon, so sind Seiteneffekte durch Fehler ausgeschlossen)

    Man sieht es nicht gleich auf den ersten Blick (Text ist nach oben verschoben), der Effekt scheint auch bei den Browsern unterschiedlich stark zu sein. Im Safari faellt es etwas mehr auf.

    Moeglicherweise liegt das auch daran wie die Baseline der Fonts interpretiert wird. Jedenfalls sehen diese wenigen Pixel Abweichung komisch aus wenn man ein kleines Bildchen und einen kurzen Text auf einer Zeile hintereinander ausrichten will.

    Viele Gruesse & Danke !!

  18. mts

    Hi Marc wie bereits ander Orts festgestellt,
    das was Du meinst ist der Platz für die Unterlänge einer Schrift. Der muss ja da sein, sonst würde die Schrift gestaucht aussehen.

    lg

  19. paterg

    Hi,
    die Lösung funktioniert leider nur, wenn man die Größe der Bilder kennt bzw. sie über die Attribute height und width angibt. Tut man das nicht, weil man sie z.B. nicht kennt, werden die Bilder nicht vertikal zentriert. Probiert es einfach mal aus. Insofern ist die dargestellte Lösung keine generelle Lösung.

  20. mts

    hi paterg

    da man rein theoretisch die Breite und die Höhe eines jeden Bildes beim img tag angeben sollte, weil sonst ja auch der IE die Bilder nicht immer darstellt,

    versteh ich dies nicht ganz..

    gibt man width und height nicht an, macht man was nicht ganz richtig,
    wenn man was nicht ganz richtig macht, kann man dies nicht als *Fehler* bei einer anderen Lösung proklamieren,

    denke ich mir 😉

    lg

  21. paterg

    Hi mts,

    versteh mich nicht falsch. Ich möchte deine Lösung nicht als falsch hinstellen. Sie funktioniert ja auch, also kann sie nicht falsch sein. Nur ist sie keine generelle Lösung. Für mich ist es auf der Seite so rüber gekommen.

    Bei einer Bildergalerie, bei der man z.B. mittels PHP thumbnails von Bildern erzeugt, kennt man die Größe des Bildes nicht und kann sie somit auch nicht per width und height angeben. Diese spezielle Problematik kann mit deiner Lösung nicht abgedeckt werden.

    Grüße,
    paterg

  22. mts

    Hi paterg

    ich war lange Zeit mal hier mal dort daher jetzt erst meine Antwort.

    ich kenne einige Gallerine (php Scripte für diese) wo man zumindest max height und max width angeben kann und sich dann doch mal entscheidet eine fixe Größe der Thumbs anzugeben,
    wegen Darstellung einer Übersichtsseite oder so..

    doch auch grade mit php müßte es-rein theoretisch sein, die Breite und Höhe des jeweiligen Thumbs an das html zu liefern, sonst tritt oft genug in Kraft..
    (wieso zeigt der IE keine Bilder an)..

    also ich versteh was Du meinst, nur es ist ein Fehler … (den leider manche Gallerie macht 🙁 )

    lg

  23. Sonja

    Hallo mts,
    zu allererst möchte ich Dir mal grundsätzlich ein Kompliment für Deine vielen nützlichen Tipps hier in Deiner Website aussprechen.

    Den Tipp mit den CSS zum Zentrieren werden wir jetzt sicher öfter in die Tat umsetzen.

  24. Dietmar

    hallo,
    hier mein Lösungsvorschlag.
    Ich habe den QT gesteste und hat auch funktioniert.
    Ein DIV 200×200 mit Hintergrund (center) und mit eingefügtem Bild 100×100(center)

    Danke für eure Hilfe ich habe nur noch ein paar kleinigkeiten von Eurer Version abgeändert

  25. mts

    Hi Dietmar, aus Abmahngründen kann man hier keine Bilder posten,
    sende es mir doch per Email und ich füge es ein, wenn Du magst.
    Meine Email Adress gibts oben unter Rechtliches.

    lg

  26. Philipp W.

    Ist zwar schon etwas älter, aber ich muss leider sagen das du komplett am Ziel vorbeigeschossen bist.

    Deine line-height erzeugt lediglich den vertikalen abstand, aber in keinster weise den die vertikale zentrierung eines textes oder bildes. In deinem Beispiel rein optisch schon – aber nehmen wir einmal an wir haben ein container mit einer Höhe von 400 px – wenn du nun deine „Lösung“ hierauf anwendest wirst du sehen wie „geschummelt“ deine vertikale zentrierung ist. Sprich, du zentrierst rein gar nix.

    Für die richtige Lösung empfehle ich folgenden Artikel : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

    Grüße
    Philipp

  27. mts

    Hallo Philipp

    hier sind nicht umsonst % genommen und keine fixe Höhe beim line-height, weil das muss man anders machen, bloß hat man sehr, sehr selten in einer Tabelle eine fixe Höhe – ich kenne nur extremst wenige Beispiele

    lg

  28. Tobi

    Verstehe den Sinn deiner Lösung nicht, wenn es mit fixen Höhen nicht funktioniert. Dann kann man es doch gleich so machen:

    vertikal zentriert

    Ist auch vertikal zentriert.

  29. Tobi

    Oh, die Kommentare akzeptieren html, also nochmal:

    <div style=“padding:5em;border:1px solid #cacaca;“>vertikal zentriert
    </div>

  30. mts

    ja Tobi es ging ja nicht nur um vertikales Ausrichten, sondern eben in der Kombination vertikal + horizontal

    lg

  31. Tobi

    Das ist doch unabhängig von einander… Ein text-align center kann man ja zur horizontalen Zentrierung trotzdem noch einfügen.

    Mir geht es nur darum, dass man ein line-height nicht missbrauchen muss, wenn es auf ganz üblichem Weg auch mit Padding funktioniert.

  32. mts

    nicht in jedem Browser Tobi,
    padding nimmt nicht jeder Browser so wie es geschrieben steht 😉

    lg

  33. Tobi

    Oh das war natürlich falsch, ich meinte:

    <div style=“padding: 5em 0; text-align: center; border: 1px solid #cacaca“>vertikal zentriert</div>

  34. mts

    wenn dann habe ich was gelöscht –zensiert nicht, 😉

    aber ich habe derzeit oft an die >55 Pseudokommentare da – da kann auch mal ein guter dreinkommen,
    Absicht wars sicher nicht…
    was wars was stand da?

    war da ein Link im Kommentar oder 2 oder gar ein Link auf ein Bild?

    das löscht mein Filter — so reinstellen, dass der Link nicht mehr *linkt* 😉

  35. mts

    line-height: die Zeilenhöhe des div wird auf das Bild vererbt …
    somit braucht das Bild egal wie hoch es ist 250% seiner Größe als Zeilenhöhe und somit es es immer vertikal zentriert – wenn man es denn mit vertikal-align so ausrichtet , weil sich vertikal-align an der Zeilenhöhe ausrichtet, bei Text ist es so, dass jeder Browser sowieso ein line-height als Standard definiert hat -jeder ein bisschen anders , aber es ist da –bei einem Bild -also img tag aber nicht, also braucht das Bild die Zeilenhöhe mitgeliefert, die nimmt es aber nur, wenn die Zeilenhöhe vererbt wird

    mit padding bestimmst du den Innenabstand … aber das Bild hat keine Zeilenhöhe an der sich vertikal-align ausrichten kann

    mit padding kannst du dann einen Innenabstand definieren, wenn du magst, aber damit wird kein Bild wirklich vertikal ausgerichtet,außer ein MiniMinibutton oder so

    naja ich hoff das habe ich verständlich rübergebracht 😉

  36. Chris

    Hier eine andere lösung, die auch in allen browsern funktioniert:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
        <head>
            <meta http-equiv="content-Type" content="text/xhtml; charset=iso-8859-1" />
            <title></title>
            <style type="text/css">
                <!--
                    div#gecentert {
                        margin-top:25%;
                        margin-left:50%;
                        width:1px;
                        height:1px;
                        border:1px solid red;
                        z-index:1;
                    }
    
                    #main {
                        width:800px;
                        height:600px;
                        margin-left:-400px;    /* hälfte von width*/
                        margin-top:-300px;    /* hälfte von height*/
                        z-index:2;
                        float:left;
                        position:relative;
                        border:1px solid green;
                    }
                -->
            </style>
        </head>
        <body>
            <div id="gecentert">
                <div id="main"></div>
            </div>
        </body>
    </html>
    

    edit von mts:code eingefügt

  37. mts

    hi Chris danke für die Mühe wegen der EMail ..

    diese Methode funktioniert gut, wenn man die Höhe und die Breite kennt und sich diese so nicht ändert. In dynamischen Systemen wie zb ein CMS wäre dies komplziert zu realisieren -aber es ging vermutlich auch.

    lg

  38. onip

    hi,

    danke für die veröffentlichung.
    ist echt ein guter ansatz, leider gefällt mir da die line-height:250%; überhaupt nicht. bei mehrzeiligen texten, sieht der umbrauch einfach nicht gut aus.
    daher hab ich das mal umgeschrieben und bin zu diesen ergebnis gekommen.

    
    
    
    
    Vertikal und horizontal zentrieren ohne Tabelle
    
    
    
    
    .img {
    	line-height: 1em;
    	text-align: center;
    	padding: 40px 10px;
    	width: 400px;
    	float: left;
    	border:1px solid #cacaca;
    }
    
    
    
    
    
    	
    
    
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    	sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    
    
    
    

    hinweis für die die kein css können. folgende angaben bewirken die ausrichtungen:

    line-height: 1em; // vertikale ausrichtung
    text-align: center; // horizontale ausrichtung
    padding: 40px 10px; // innenabstand

  39. onip

    naja, hab’s mir schon gedacht das der html code nicht eingetragen wird.
    vielleicht kann der mod mich mal anschreiben, damit ich code zur verfügung stellen kann, oder mir sagt wie ich den code hier eintragen kann wie bei Nr. 40.

    danke

  40. empty

    Oh mein Gott, du bist mein Held! 😛
    Nein, im Ernst, ich Quäl mich schon seit gestern abend mit einer herum, in der die Elemente samt Beschreibung in -Container gepackt sind. Element ist dabei ein Thumbnail, die Beschreibung der Bildname dazu. Das ganze wird eine Galerie auf Basis (schien passend).

    Das mit der line-height ist auf jedenfall ein toller Tipp – ich habe damit die normale height des divs ersetzt. Dem dann noch das Attribut vertical-align: middle, wie beschrieben verpasst und schon wars zentriert ^^.

    DANKE! 🙂

  41. mts

    Hi empty Danke für die Rückmeldung –liest sich gut,wenn man hört, dass die eigenen kleinen Snippets weiterhelfen

  42. Mike

    Nach anfänglichen Problemen und diversen Foren hab ich diesen Ansatz gefunden

    DIV.container {
    height: …;
    width: …;
    display: table-cell;
    vertical-align: middle }

    Dieser kleine Absatz…

    Der Trick dabei ist, mittels einer Quasi-Tabellenzeile die Funktion ‚vertikal-align‘ zu nutzen – auch ein Zeilenumbruch macht somit keine Probleme

  43. Mike

    Sry – kleiner Darstellungsfehler

    statt …
    Dieser kleine Absatz…


    ‚ Dieser kleine Absatz…‘

    ich hoffe, die Anzeige ist jetzt richtig

  44. mts

    Hallo Mike,
    ja das ist eine Möglichkeit, allerdings wollen dies viele Browser nicht *kennen*

    IE6,IE7 und Safari Browser können display:table nicht oder nicht komplett richtig darstellen.

  45. Mike

    Lieber Sven,
    der liebe Herrgott erhalte uns unsere Tabellen und bewahre uns von DIV – Container Fanatikern.
    Eine ordentliche professionelle Webseite ohne Tabellen zu gestalten ist schwierig und kann zu Quellcodes von bis zu 2 Metern Höhe und mehr (im DOM Viewer) führen.
    Auch CSS Stylesheets von 200 und mehr css Gruppen sind bei etwas umfangreicheren Werken keine Seltenheit.
    Das alte Argument der Übersichtlichkeit und des „weniger Code“ hat sich als Ammmenmärchen herausgestellt.
    Auch die „Gute Mischung“ von Div Containern und Tabellen hat sich als fragwürdig erwiesen, da eine vertikale Erweiterung von in Div Containern „eingekerkerten“ Tabellen gar nicht oder nur unter großen Schmerzen möglich ist.
    Bei fließender (floating) Gestaltung geht die Übersichtlichkeit schnell baden.
    Wie überall empfiehlt es sich, die Interessenlage der Beteiligten anzuschauen und zu verstehen:
    1.) Wo kämen wir denn hin, wenn mit WYSIWYG Editierprogrammen und einfacher HTML Programmierung jedermann anständige Webseiten konstruieren kann?
    Dann werden wir Programmierer ja vielleicht arbeitslos.
    2.) Also, was machen wir? Wir führen die Nichtprogrammierer ins Verderben. Wie machen wir das? Wir programmieren in php und aspNet. Das kann kain Laie.
    3. Nun sind wir die Amateurprogrammierer aber immer noch nicht losgeworden. Also hacken wir auf der guten alten HTML Programmiersprache mit ihren intuitiv zu begreifenden und verwirklichenden Tabellen so lange herum, bis wir diesen Webstandard kaputtgequatscht und die böse Amateurkonkurrenz in die CSS Falle gelockt haben.
    4. Langsam, ganz langsam führen wir sie an Stylesheets heran, die ja auch was die Layoutgestaltung im engeren Sinne angeht viel für sich haben. Font size, font face, font color AusdieMaus. STYLE muss man haben.
    5. Sobald die Fischlein angebissen und ihren STYLE gefunden haben, jagen wir sie mit DIV Containern auf die Klippen.
    6. Nun sind wir wieder unter uns. Gas Geld fließt wieder dahin, wohin es hingehört, in die Taschen der Magier, der professionellen Programmierer.
    Na also.

  46. Tobias

    Vorab: Hallo, liebe Leidensgenossen! =)

    Also irgendwie scheint das Problem immer spätestens da anzufangen, wo die Höhe der Divs variabel wird. Für den einen oder anderen Browser kann man da Lösungen basteln, aber wirklich cross-browser-fähigen Code habe ich persönlich bisher weder gesehen noch selbst hinbekommen. Auf reinen html/css Seite ohne CMS benutze ich deswegen stets eine Angabe wie style=“min-height:58em;“ auf jeder Einzelseite.

  47. hmmmm

    div#Feld
    {
    width: 180px;
    height: 36px;
    font-size: 0.6em;
    line-height: 36px;
    }

    Vertikal zentriertes Feld

  48. Tobias

    Nein – das ist vertikal zentrierter T E X T. Aber setze mal ein anderes div rein ;).

    top:50%;
    margin-top:-xxem;

    xx=halbe Inhalts-Höhe. Wie gesagt: Ohne feste Höhenangaben geht´s imho nicht.

  49. Chris

    Das ganze ist ja nett. ABER es funktioniert leider nur bis zu Browser Fenstergrößen die über (!) der des Inhalt liegen. Sonst verschwinden eben bis zu 50% des Inhalts im Nirvana und lassen sich auch durch Scrollbars nicht sichten. Ganz blöd für kleine Handybrowser!

  50. mts

    ja Christ den kleinen HandyBrowsern kann man ein eignes Layout liefern,
    da ist ja zentrieren sowieso umsonst oder für die Katz 😉

  51. Chris

    Nun ja da spricht wieder was dagegen – Kosten. Es reicht ja schon wenn man für den allseits defekten, aber leider weit verbreiteten, Kleinweich-Browser Ausnahmen einbauen muss. Da bewege ich mich lieber weniger „stylisch“ und nehme tables.

  52. Sebastian aus Köln

    Ich denke auch, dass die Lösung v.a. auf iPhone / iPad und anderen mobile Displays einige Nachteile hat. Aber so ist das… was heute funktioniert, muss morgen nicht mehr.

  53. therealanodyne

    Hallo lieber Blogbetreiber.
    Mit Verlaub, ich verstehe deine Beispiele oben nicht.
    Die Bilder mit der Überschrift:
    „Bilder vertikal und horizontal zentrieren“
    1. klebt am unteren Rand des Containers, 2. ist ja nicht zentriert, da der Container ja nicht höher als das Bild ist.

    Habe deinen Code losgelöst mit Text getestet, funktioniert wunderbar. Was aber ist, wenn ich einen absolut positionierten Container mit fester Breite und Höhe habe und dort Bilder mit variabler größe vertikal und horizontal zentrieren möchte ?
    Eine Idee dazu ?

    Ansonsten, vielen Dank für deine Mühe mit anderen Menschen dein Wissen zu teilen.

  54. Ventil

    Also ich glaube ohne JS kommt das hier dem gewünschten Ergebnis am Nächsten:

    .container
    {
    position: absolute;
    left: 50%;
    top: 44%;
    text-align:center;
    width: 100%;
    margin-left: -53%;
    }

    .content
    {
    width:5em; height:5em; background-color:#F93; color:#F33; margin-left: 50%;
    }

    Natürlich müssen die % Angaben immer dem Content angepasst werden (aber das kann man zB mit Kurzklassen machen class=“container 50pro“, wobei in .50pro halt nur die Prozentangabe ist).

    Es ist nicht perfekt – aber perfekt geht offenbar einfach nicht.

  55. AMTT

    Funktioniert perfekt.
    Manche Dinge können so einfach sein, wenn man nur weiß wie 😉

    Vielen Dank nochmal.

  56. mts

    Hi Philipp
    das freut mich mehr als Du Dir vorstellen kannst,
    es macht dann mehr Spaß Tuts zu schreiben,
    wenn ich weiß, dass sie auch helfen 🙂