img in div vertical zentrieren

[Christian]

Hallo.

Ein Problem mit HTML treibt mich in die Verzweiflung. Ich habe mehrere Bilder mit 150px Breite aber variabler Höhe. Allerdings ist deren Höhe ebenfalls maximal 150px. Jetzt möchte ich bei den zu niedrigen Bildern oben und unten einen farbigen Balken einfügen, damit sie ebenfalls als 150x150 dargestellt werden (natürlich ohne sie zu strecken). Also nehme ich mir eine div-Box der Größe 150x150, färbe sie ein und zentriere das Bild in der Box vertikal. Ist allerdings leichter gedacht als getan, da vertical-align außerhalb einer Tabelle nicht das tut, was ich mir darunter vorstelle - nämlich das Bild vertikal zu zentrieren.

Hier ein (nicht funktionierender) Codeschnippsel, der das verdeutlichen soll, was ich mir vorstelle

  
div {  
  width:150px;  
  height:150px;  
  background:#000;  
  vertical-align:middle;  
}  
div img {  
  width:150px;  
  height:auto;  
}  

  
<div><img src="foo.bar"></div>