CSS: center dynamic image in div

As a learning tool, I'm updating an old page of mine to use CSS and XHTML and I'm running into a problem aligning the main image in its containing div. What I want to do is center the image both vertically and horizontally. The problem is that the image that displays is dynamically selected from a directory of images, some of which are of landscape orientation and some of which are of portrait orientation.

Now, I know I could use php to determine the dimensions of the image and javascript to reset the positioning attributes, but it seems like a lot of work to replace the old method by which it was centered:


Can y'all clue me in to a better way to do this?

Thanks.

Doesn't this work: ?

text-align:center does horizontal, but not vertical

Are you using inline styles or are you linking to an external stylesheet?

Inline. Why?

Because inline styles can often make the individual page code unwieldy and its most often better to give a div an identity and define it in an external stylesheet.

Anyway, have you tried extending what niko_zeta said by introducing:

<div style="text-align: center; vertical-align: center">
<img src="<?php echo $imgsrc ?>" />
</div>

Another alternative is to use either relative or absolute positioning depending on which better suits your needs.

Yeah, I tried vertical-align: middle, both in the div tag and in the img it contains. I don't care what the w3c says, vertical-align DOES NOT alter an element's position within its parent tag.

I've been avoiding declaring the positioning since to do that I'll have to calculate the dimensions of the image, but it doesn't appear I have much choice.

Thanks for the suggestions.

Just a tip: vertical-align seems to only work with table elements like td, th, tr. I've never got it to work with divs.

This works (sort of) in latest IE/FF, with deviations between, of course.



ps I've made several requests to fix the 'code' tags for this forum to retain formatting, to no avail. Thus the 'php' tags for html.

The div must of course not be of "display: block", because block elements are not sensitive to content size: 'height: 100%' will stretch the height of the div to its container's height, not its content's height.