Img vertical align inside a div

[leonnk]

I am trying to vertically align my img's inside a div.

I have a series of portrait and landscape images which are generated through a javascript gallery (I add them as their full size images to the html and the script resizes them as thumbnails and creates the fullsize image in a specified div elsewhere on the page).

So because of that, I can't use relative positioning or padding.

But here's a simple example:

CSS:

.center
{
width:700px;
height:700px;
background-color:#00F;
}

HTML:

<div class="center">

<img width="676px" height="485px" src="photo.jpg" />

</div>

So on this I have tried...

Vertical-align:middle;
---
.center
{line-height:700px;}
---
.center
{position:absolute;
top:50%;
left:50%;
margin-left:-50%;
margin-top:-50%;
}

Are there any other css based techniques?

Thanks

 

[Vragabond]

http://d-graff.de/fricca/center.html

This is the best vertical-centering mechanism I've seen. Try and see if you could use this on your page.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[leonnk]

Thanks for that.

I've given it a go but can't get it to work. I think my problem lies down to the fact that I'm using a javascript image gallery to generate the images.

I am now looking to build a script that will add margin-top to images that have larger widths. I think this should work okay.