✔ Inhalt eines DIV vertikal zentrieren?

[phenomenia]

Hi,

ich möchte gerne den Inhalt eines DIVs vertikal zentriert darstellen. (also Bilder, Texte etc).

Da vertical-align ja nur auf Inline Elemente funktuniert und ich mit display: inline auch nicht das bekomme was ich will, schreibe ich hier mal.

Hatte auch shcon mal überlegt ob man das irgendwie absolut in nem anderen DIV positionieren kann und dann um die halbe Höhe negativ verschiebt, aber das bringt auch nichts.

Freue mich auch konstruktive Beiträge..
Phenomenia

 

[stoneberg]

Bin nicht der CSS-Guru aber evtl gehts mit line-height das die gleiche höhe hat wie das div

 

[ZodiacXP]

Richtig, line-heigt führt zum gewünschten Ergebnis: http://www.tutorials.de/forum/css/267795-div-inhalt-vertikal-zentrieren.html

Andere Methoden sind mit display:table : http://www.html-world.de/program/css_14.php (schneller Link aus Google, selfHTML ist vielleicht besser)

 

[phenomenia]

Danke für die Antworten, aber das bringt bei mir beides nicht den gewünschten effekt.
Mit line-height gebe ich ja eine Zeilenhöhe an und wenn ich mehrzeiligen Text habe dann wird der jede Zeile angewand die dann einen Abstand zueinander haben statt der ganze "Container" zur umgebung zentriert gesetzt wird.

Und mit display: table bekomme ich nichts anders dargestellt..
Auch mit den Beispielen von selfHTML gibts nichts dolles..

Wenn ich da ne höhe von z.B: 100px auf das Div gebe kleben die texte onen links statt vertikal mittig...

phm



**** edit ****
Habs jetzt. Folgendes auf das DIV packen und der inhalt wird vertikal mittig dargestellt:
vertical-align:middle; display:table-cell

thx,
phm
*************

 

[Maik]

**** edit ****
Habs jetzt. Folgendes auf das DIV packen und der inhalt wird vertikal mittig dargestellt:
vertical-align:middle; display:table-cell

Und für alle, die auf der Suche nach einer handelbaren Lösung im IE sind, da er bislang die Tabellenwerte der display-Eigenschaft noch immer nicht unterstützt, und somit in ihm die vertikale Zentrierung mittels vertical-align:middle nicht greift, hab ich zwei Beispiele incl. IE-Workaround parat:

• http://www.pmob.co.uk/temp/vertical-align3.htm
• http://www.pmob.co.uk/temp/vertical-align11.htm

mfg Maik

 

[phenomenia]

Mist... da war doch wa.. Stichwort: Browserkompatibilität..
Dann werde ich deine Links wohl nochmal überfliegen um meine Divs zu überarbeiten.

Vielen Dank!!
Phenomenia