Benni7: Bild (overflow: hidden) vertikal zentrieren

Hallo zusammen!

Ich habe folgende Situation: Ein div-Element ist 800px breit und 200px hoch. In diesem div ist ein Bild mit dem <img> eingebunden. Mein Ziel ist es, das Bild vertikal zu zentrieren und das, was übersteht, abzuschneiden. Dabei soll oben und unten jeweils gleichviel abgeschnitten werden. Mein Code bisher:

.box {  
width: 800px; height: 200px;overflow: hidden;  
}  
.box img {  
width: 800px;  
height: auto;  
vertical-align: middle;  
}

<div class="box"><img src="bild.jpg"></div>

Das Ergebnis bisher: Das Bild wird in der richtigen Breite eingefügt und das was über das div hinausgeht wird abgeschnitten. ABER: es ist vertikal nicht zentriert, sondern oben bündig.
Ich habe es weiterhin schon mit margin: auto; probiert, allerdings erfolglos.

Hat jemand eine Idee, was ich noch probieren könnte?

  1. Grüße,
    ich denke als hintergrundbild ließe es sich wesentlich einfacher so gestalten wie du es die wünschst. es ist im allgemeinen schwer ein objekt kontrolleirt an den grenzern des parents vorbeizuschieben
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth