Vertically aligning an image within a div

[jonhart]

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 )?

[madcat]

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]

[MCookie]

You could set a margin-top on the images that are 64 wide. Or a padding-top on the div.

[jonhart]

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.

[madcat]

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?

[rewboss]

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.

[Nick_W]

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

[jonhart]

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]

[madcat]

Oh. I see.

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

[mdharrold]

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>

[c3oc3o]

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>

[mdharrold]

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>

[antidote]

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.

[tedster]

Have you tried to use a non-breaking space in the div, to establish the baseline for alignment styles?

[jonhart]

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.