Topic: Vertically Align an image

[ryanh_106]

Hi,

I want to display 3 random images on my homepage, each time it loads. They are all no more than 200px high or wide (depending on their orientation), but apart from that I cant be sure how high they are.

I have a container div which is 230x230 and has a background image of like a raised platform onto which I want the image to be placed. I can then center the image horizontally using text-align but i need some ideas on centering vertically. I know its never easy, but im hoping someone has a cheeky workaround i can use.

HTML:

Code: [Select]

<div class="sample">
  <a href="search.php?indexfind=22" title="Click to view property information">
    <img src="includes/image_processor.php?select=22" alt="EXAMPLE PROPERTY" title="Click to view" />
  </a>
</div>
CSS:

Code: [Select]

.sample { width:230px; height:230px; display:block; float:left; background-image:url('../../images/box.jpg'); background-position:center center; background-repeat:no-repeat; text-align:center; }
.sample img { margin-top:15px; }
Thanks

Ryan

[AndyB]

Workaround? Sure. Use getimagesize() to determine the height of the image that needs to sit on the platform. Do a little math. Position the image the right distance from the top of the container and it'll sit right on top of the platform.

[ryanh_106]

Hi Andy,

Didnt actually use that method in the end (as the images are generated on the fly) but wouldnt have thought of doing it like that without you mentioning it so thanks a lot.

Ended up using javascript after the image had been placed to get its height property then change the style to nudge it down the required amount

Thanks again

Ryan