Center image within div

This old chestnut - I've read a bunch of articles on this but still can't get it working.
I have an image withing a fixed size div. I need to keep the div fixed size because I'll be swapping the images using javascript. Also, because the images and their sizes will be changing, I can't center them by fixing the margins, like someone suggested.
So how do I get the picture to be centered vertically & horizontally within the div, and stay centered even when the image (and image size) change?
Here's a snippet:

Code: Select all

<div style="width:500px; height:500px; border:1px solid gray; ">
<img style="text-align:center; vertical-align:middle;" id="mainpic" src="../images/productpics/6681-1099424825.jpg" width=190 height=288>
</div>

Have you tried usig %'s in your css for example:
If this doesnt work repost and I will try to come up with somthing else.

in a style sheet, do this:
div img {
vertical-align:middle;
margin:0 auto;
}

if you are wanting it to be centered completely:

#sample {
text-align:center;
vertical-align:middle;
}

Sometimes that doesn't work, the only garaunteed way to do it is like this:
(X)HTML

Code: Select all

<div id="box">whatever is in here will be centered both
horizontally and vertically, even while viewer is dragging the
browser window to different dimensions</div>

CSS

Code: Select all

#box {
width: 600px;
height: 400px;
position: relative;
top: 50%;
left: 50%;
margin: -200px 0 0 -300px;
}

This places the top-left corner of the "#box" in the dead center of the screen, then pulls it back by half of it's height, and half of it's width. The end result is the center of the box is in the center of the browser window, no matter how big the browser window is.

I'm trying to center two blocks of text and a swf movie, which i've managed to get side by side, inside a <div> container. I found the following tutorial but it hasn't helped:

http://www.w3.org/Style/Examples/007/center.html

Is there something else I must do to get everything within this <div> centred?

I'm using:

margin-left:auto;
margin-right:auto;

but it's just not happening. It's all staying on the left. I know how to get space either side of the swf by using

margin-left:20px;
margin-right:20px;

But I need it all centred!

Thanks.

1. put the 3 thangs inside a span & senter the span inside the div.