Det er alltid en smerte uten like, hvis man ikke vet hvordan man skal gjøre det. vertical-align er ikke alltid like hjelpsom.
Her er en irriterende enkel måte å vertikalt sentrere et bilde i en div med kun CSS (og CSS expression for IE)
Det er en smal sak å få dette til å fungere på tabeller. Dere har nok alle, som meg, prøvd å sette display: table-cell og vertical-align: middle i div-beskrivelsen og håpet på det beste. Fungerer selvsagt ikke i Internet Explorer - versjoner under IE7 støtter ikke display: table-cell. 
Jeg kom om over en funksjonalitet i CSS for et par uker siden som jeg ikke visste om før, kalt dynamic CSS attributes. Kult, følg med her:
[høyden på boksen] - [høyden på bildet] / 2. Resultatet blir luften mellom bildet og div på topp og bunn. Sett resultatet som øvre margin på bildet og man får en riktig margin!
http://kamikazemedia.no/work/diverse/eksempel.jpg
Jeg har fått denne løsningen til å fungere i IE6, Firefox 2, Opera 9 og Safari 2. Fungerer nok i eldre versjoner, men de har jeg ikke testet. Kom gjerne med tilbakemeldinger på eldre versjoner!
Her er en irriterende enkel måte å vertikalt sentrere et bilde i en div med kun CSS (og CSS expression for IE)
Kode
<html>
<head>
<style type="text/css">
.content
{
width: 100px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid red;
}
.content img
{
margin-top: expression((100 - this.height)/2);
}
</style>
</head>
<body>
<div class="content">
<img src="images/thumb3.jpg" />
</div>
</body>
</html>
Jeg kom om over en funksjonalitet i CSS for et par uker siden som jeg ikke visste om før, kalt dynamic CSS attributes. Kult, følg med her:
Kode
margin-top: expression((100 - this.height)/2);
http://kamikazemedia.no/work/diverse/eksempel.jpg
Jeg har fått denne løsningen til å fungere i IE6, Firefox 2, Opera 9 og Safari 2. Fungerer nok i eldre versjoner, men de har jeg ikke testet. Kom gjerne med tilbakemeldinger på eldre versjoner!