homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Vertically aligning an image within a div
jonhart

10+ Year Member



 
Msg#: 3147 posted 10:46 am on Aug 27, 2002 (gmt 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 )?

 

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3147 posted 3:48 pm on Aug 27, 2002 (gmt 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]

MCookie

10+ Year Member



 
Msg#: 3147 posted 4:19 pm on Aug 27, 2002 (gmt 0)

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

jonhart

10+ Year Member



 
Msg#: 3147 posted 1:02 am on Aug 28, 2002 (gmt 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.

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3147 posted 2:31 am on Aug 28, 2002 (gmt 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?

rewboss

10+ Year Member



 
Msg#: 3147 posted 5:45 am on Aug 28, 2002 (gmt 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.

Nick_W

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



 
Msg#: 3147 posted 6:27 am on Aug 28, 2002 (gmt 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

jonhart

10+ Year Member



 
Msg#: 3147 posted 9:26 am on Aug 28, 2002 (gmt 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]

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3147 posted 12:38 am on Aug 29, 2002 (gmt 0)

Oh. I see.

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

mdharrold

10+ Year Member



 
Msg#: 3147 posted 2:14 am on Aug 29, 2002 (gmt 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>

c3oc3o

10+ Year Member



 
Msg#: 3147 posted 8:51 pm on Aug 30, 2002 (gmt 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>

mdharrold

10+ Year Member



 
Msg#: 3147 posted 9:03 pm on Aug 30, 2002 (gmt 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>

antidote

10+ Year Member



 
Msg#: 3147 posted 5:40 am on Sep 2, 2002 (gmt 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.

tedster

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



 
Msg#: 3147 posted 8:31 am on Sep 2, 2002 (gmt 0)

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

jonhart

10+ Year Member



 
Msg#: 3147 posted 10:22 am on Sep 2, 2002 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved