...

View Full Version : Align image vertically



Badman3k
03-07-2005, 07: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,

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

evo
03-07-2005, 07: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.

Badman3k
03-07-2005, 07: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,

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


:)

Badman3k
03-07-2005, 08: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:

mcdougals4all
03-07-2005, 08: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...

http://www.codingforums.com/showpost.php?p=240611&postcount=1



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum