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!