IMG in DIV vertikal zentrieren

[molily]

Hallo,

vertical-align: middle zentriert Inline-Inhalte in einer Zeilenbox. Also müsste vertical-align auf das img angewendet werden, nicht auf das div. Hier ist die Zeilenbox aber nur 16px oder so hoch (siehe http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height@title=line-height), daher klebt das Bild oben.

Wenn das Elternelement eine feste Höhe hat, dann kannst du einfach die line-height auf diese Höhe setzen:

<p>  
  <img …>  
</p>

p {  
  height: 100px;  
  line-height: 100px;  
}  
  
img {  
  vertical-align: middle;  
}

Beispiel:
http://codepen.io/molily/pen/DCEik

Ansonsten gibt es noch viele weitere Methoden zur vertikalen Zentrierung, je nach Anwendungsfall:
http://www.vanseodesign.com/css/vertical-centering/
http://designshack.net/articles/css/how-to-center-anything-with-css
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Mathias