View Full Version : Align image vertically

03-07-2005, 06:01 PM
I'm trying to position an image within a div using css. I want it to be roughly in the centre (vertically). The only thing within the div is the image and nothing else, however the height is not given and can vary.

Does anyone have anyideas how to do this using just css and/or some (extra) tags?

This is the html i'm using:

<div style="width: 40px; height: 100%"><img src="images/delux.gif" /></div>

N.B. This div is within a container div, but i don't think that makes a difference.

Many thanks in advance,

03-07-2005, 06:30 PM
Try searching the forums for "vertical align" and tell us how you get on :) .

03-07-2005, 06:48 PM
Alter it so that the image is set as the background of the div and not within it.

#id/.class { background: url(image-path) no-repeat center; height: abpx; }Align it to centre and it should do it all for you horizontally and vertically.

03-07-2005, 06:52 PM
@ Chilipie:

Thanks for replying. I've had a browse of the search results for "vertical align" with and without images, and i've tried a few 'solutions' but nothing seems to work. They either require you know the height of the div or don't work lol:D

@ evo:

Thanks also for replying but doesn't your method also require i know the height of the div layer, which i unfortunately don't. It's in a container which expands depending on the other content in the container.

However I've had a bit of a thought about it and may have had an idea how to do it. I'll try and let you all know how I get on.

Cheers again,

03-07-2005, 06:56 PM
It doesn't need the height property.


03-07-2005, 07:23 PM
Thanks again for replying. I've actually decided that in the situation that i want to implement it, it is not possible, as it's not possible to define the height of the container div or any div for that matter, and therefore the div with the image in it just expands to 50% of the screen size. However evo I can see that your idea works, thanks for the solution, just a shame I can't actually implement it :(

Thanks again:thumbsup:

03-07-2005, 07:52 PM
The only thing within the div is the image and nothing else, however the height is not given and can vary

It sounds like evo's background suggestion would work if you gave the div a min-height, so you're assured it's at least tall enough for the image but could be taller if necessary.

Here's a great way to make it work in IE as well...