Welcome to WebmasterWorld Guest from 54.159.19.75

Forum Moderators: incrediBILL

Message Too Old, No Replies

Vertically aligning an image within a div

     
10:46 am on Aug 27, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:4
votes: 0


Its pretty simple sounding, I want div, with the image inside it vertically aligned ( its for a thumbnails page ).
The div is fixed at 64x64, but the image size can vary, it will either be 64 wide or 64 high.
The 64 high images are fine, they are center aligned.
However the 64 wide images ( which are less than 64 high ) just refuse to be centered vertically.
Ive tried use 'vertical-align: middle' all over the place. The problem is that it is only respected when there is a textual context to align it against ( eg putting any character in the div with the image ). Unfortunately this forces the image to move, and it falls outside the div.

Is there a way to do this ( Im targetting mozilla, so not working in IE is ok )?

3:48 pm on Aug 27, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


Hello and Welcome-

You could use absolute positioning.

img.something
{ position: absolute;
top: 100px;
left: 100px;
width: 64px;
height: 64px;
}

Of course you could use whatever combination of top, right, bottom or left to place your images however you see fit.

You could use percentages as well.

M

[edited by: madcat at 4:34 pm (utc) on Aug. 27, 2002]

4:19 pm on Aug 27, 2002 (gmt 0)

New User

10+ Year Member

joined:July 9, 2002
posts:15
votes: 0


You could set a margin-top on the images that are 64 wide. Or a padding-top on the div.
1:02 am on Aug 28, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:4
votes: 0


I cant use absolute positioning, or padding, because I dont know how big the images are.

eg: One image is 42x64 ( and displays perfectly ),
the next image is 64x43,
and a third is 64x50

All three have the top of the image aligned with the top of its respective div, and it looks pretty bad.

At this point Ive resorted to wrapping each image in a table, which can do crazy things like dynamic vertical sizing.

So far Im quite dissappointed with how weak divs are, in comparison to tables.

2:31 am on Aug 28, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


I dont know how big the images are.

One image is 42x64
the next image is 64x43,
and a third is 64x50

Huh? I think I just misunderstand you. It would seem to me that positioning would be the way to go. Can you put something in your profile?

5:45 am on Aug 28, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 0


I think jonhart was giving an example of what he's up against. Of course he knows the dimensions of each image, but presumably his HTML/CSS doesn't. I'm guessing he has some sort of slide show effect, some images are portrait, some are landscape. Rather than hard-code all the margins/padding/coordinates for each image individually (which would be hard to edit and take up disk space or add to code bloat) he just wants a way to automatically centre the image regardless of its dimensions.
6:27 am on Aug 28, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Just a thought: Have you tried this:

.image {
margin-top: auto;
margin-bottom: auto;
}

Or putting your images within a <p> and applying the vertical-align to that?

Nick

9:26 am on Aug 28, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:4
votes: 0


Unfortunately <p> doesnt work.

After playing with this a lot, Ive worked out that the vertical center is only ever in the context of surrounding text. Hence even putting it in a <p> doesnt help, because it is only centered relative to text within the <p>. The <p> itself will not center relative to the div.

I will try the auto margin thing, Ive never seen that before.

What Im creating is a photo album, that is dynamically generated from the contents of a directory. You can have a look if you want: <edit - sorry, no personal URLs>
navigate into the photo ablum and then into beach, or deep into the new zealand album.

One solution would be to put transparent borders on the thumbnails so that they are all 64x64, but that is a bit difficult for my intended users, who are just going to be scanning images and uploading them to the albums.

[edited by: tedster at 2:44 am (utc) on Aug. 29, 2002]

12:38 am on Aug 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


Oh. I see.

The link timed out on me jonhart- you might want to throw it in your profile as well.

2:14 am on Aug 29, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Mar 19, 2001
posts:220
votes: 0


I achieved the goal with this:

<style type="text/css">
#images
{ background-image: url('[b]url of image[/b]'); background-repeat: no-repeat; background-position: center; width: 64px; height: 64px }
</style>

<div id="images">
</div>

8:51 pm on Aug 30, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:July 13, 2002
posts:133
votes: 0


Wow, mdharrold - that's an elegant solution, I like it.
But it makes it a bit more complicated to link the image, as he will want to do with thumbnails, if it's in the background.

I played around with the problem quite a lot too, my solution is a little JS+DOM-script to center them.

Images to be centered must have the attribute id="centered1", centered2, centered3 and so on to infinity. The script must be at the end of the document.
Demo page link in my profile.

<script language="JavaScript" type="text/javascript">
function centerit(which, i) {
var which2 = which+i;
if (document.getElementById(which2)) {
document.getElementById(which2).style.marginTop = Math.floor( (document.getElementById(which2).parentNode.offsetHeight - document.images[which2].height) / 2 ) + 'px';
var newi = i + 1; centerit(which, newi);
}
}
setTimeout("centerit('centered', 1)", 1);
</script>

9:03 pm on Aug 30, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Mar 19, 2001
posts:220
votes: 0


It does offer a linking issue, but I think that could easily be fixed by having a 64x64 transparent gif linking to each document.


<div style="background-image: url('url of image'); background-repeat: no-repeat; background-position: center; width: 64px; height: 64px"><a href="link to page"><img src="transparent gif" width="64" height="64"></a></div>
5:40 am on Sept 2, 2002 (gmt 0)

New User

10+ Year Member

joined:May 8, 2002
posts:13
votes: 0


I've come across this problem too and since IE doesn't fully support height% positioning the only way I've been able to reliably vertically align img's in div's especially if they are dynamically generated is to put them in a table cell and middle align. Not elegant, I know (I personally try to avoid tables at all cost) put the only thing that works most of the time.
8:31 am on Sept 2, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Have you tried to use a non-breaking space in the div, to establish the baseline for alignment styles?
10:22 am on Sept 2, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:4
votes: 0


Yes, but the div isnt wide enough ( just fits a 64x64 image ) to have the image and the div side by side, so the nbsp is on line, and the image on the next.

In addition, the center baseline is only relative to the nbsp. I havent found a way to align the nbsp to the div.

My website is a bit more stable now, and Ive put it in my profile, so you can have a look and see what Ive done regarding this problem. Its not finished yet.