Hallo,

vlt hat ja einer von euch damit schon Erfahrungen gemacht - google brachte mich nicht wirklich weiter.
Ich möchte in einem div ein Bilder vertikal (und horizontal) zentrieren.
Folgendes habe ich schon versucht:

<div style="height: 100px; line-height: 100px; vertical-align: middle">
<img ... />
</div>

Das funktioniert nur im IE. Als workarround für den FF habe ich nur die CSS3 Eigenschaften für display (table,table-cell) gefunden die aber z.Z. noch nicht funktionieren.
Hat jemand eine _nicht Tabellen_ Lösung die nach Möglichkeit auch noch kompakt ist?

Hier:

http://www.selfhtml.de/forum/zeigebeitrag_1_118830_118820_100.php

oder:

http://www.tutorials.de/forum/css/239566-bild-vertikal-und-horizontal-mittig-ausrichten.html

Vielleicht hilft Dir das weiter !;)

Wenn Du in Google suchst, gib z.B. ein:

"DIV"+"Bild"+"vertikal"+"horizontal"+"ausrichten"+"HTML"

CUL8'er.

> Folgendes habe ich schon versucht:
> <code>
> <div style="height: 100px; line-height: 100px;
> vertical-align: middle">
> <img ... />
> </div>
> </code>
>
> Das funktioniert nur im IE

Sollte das tatsächlich im IE funktionieren und du auf
dein Windows noch die übliche gesetzliche Gewährleistung
haben, würde ich an deiner Stelle von Microsoft fordern,
deinen fehlerhaften Internet Explorer durch einen
funktionierenden zu ersetzen.

Denn das ist ein Bug, kein Feature...

Sollte das tatsächlich im IE funktionieren und du auf
dein Windows noch die übliche gesetzliche Gewährleistung
haben, würde ich an deiner Stelle von Microsoft fordern,
deinen fehlerhaften Internet Explorer durch einen
funktionierenden zu ersetzen.

Denn das ist ein Bug, kein Feature...

Ist ja nichts neues ;-)
Ich hatte es so nur "ergooglet", dass dieser hack funktionieren sollte.

Hallo,

das hilft mir leider nicht weiter (wie auch die beiträge die ich gefunden habe)
Da ich die Höhe des Bildes nicht kenne.
Ich habe ein div 117px x 86px darin ist ein bild (thumb) dessen längste Seite auf 117px bzw 86px gesetzt ist.
D.h. Bilder dessen Seitenverhälnis anders ist und breiter als hoch sind müssen vertical zentriert werden.
Die Frage ist nur: wie?

Gruß

chris

hmm, so ausm stehgreif, schon mal mit margin: auto; probiert?

habe ich probiert

Es funktioniert, wenn man es richtig macht¹
- line-height im Block-Element
- vertical-align im Inline-Element

Beispiel:

<div style="line-height: 200px; border: 1px solid black">
    <img style="vertical-align: middle; border: 1px solid black" src="http://www.google.de/intl/de_de/images/logo.gif" alt="" />
</div>

Die schwarzen Rahmen in dem Beispiel dienen nur
dazu, dass man den Effekt auch sehen kann.

werd ich morgen mal testen =)
thx

wäre super wenns so einfach ist ;-)

für den IE kann ich ja das vertical-align - wenn wirklich - mit in das div reinschreiben.

Hi!
Das funktioniert (zumindest bei mir) nicht. Jedenfalls nicht auf meinem IE6. Der Feuerfux zeigt es nicht besser, auch wenn ich dem div eine Höhe mitgebe.
Kannst mir da mal nen Screenshot schicken bitte? :P
Gruß /Dennis

Hi!
Warum zeigst du das Bild nicht einfach per background-image zentriert an?
Gruß /Dennis

> Kannst mir da mal nen Screenshot schicken bitte?

http://img59.imageshack.us/img59/9654/verticalalignto4.png

div {
   line-height: 200px;
   border: 1px solid black;
   background-color: #ccc;
            
}
img {
   vertical-align: middle;
   border: 1px solid black;
}

Es geht nur um die vertikale Zentrierung des Bildes
im Div (hier der graue Kasten). Das funktioniert bei
mir in Gecko 1.8 und 1.9 und mit Opera - andere
Browser habe ich nicht ausprobiert.

Wichtig ist, dass du für den Div keine Höhe angibst
oder diese gleich der line-height ist. Auch muss
line-height einen absoluten Wert haben - relative
Werte wie line-height: 100% beziehen sich auf die
Schriftgröße, nicht auf die Höhe des Fensters oder
einbettenden Block-Elements.

Wenn du ein Bild mittig auf einer Seite zentieren
möchtest, wird es etwas komplizierter.
Eine mögliche Lösung:

div {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0px;
   height: 0px;
}
img {
   margin-top: -55px;    /* 1/2 * bildhöhe */
   margin-left: -150px;  /* 1/2 * bildbreite */
}

also gestestet in: firefox 2, IE 7, Opera 9, Safari 3

thx =)