centering images within a <div>

[rsteph]

I'm using two divs to create a shadowed-box type effect. Within the top div I want to put an image. I can get the image to center right to left, but not top to bottom. I'm making a series of boxes, and the images in them aren't all the same size. So I've sized the boxes to mach the largest of them, and I want to center them, so those that are smaller will be in the middle of the first div.

Here's the code on the page:

<table border="0" cellpadding="23" cellspacing="0" bordercolor="#FF33FF" width="900" bgcolor="#c4c4c4">
<tr>
<td align="center" valign="middle">
<div id="shadowdiv" align="center">
<div id="imagediv" align="center" style="height: 187px;"><img src="/images/manna2.gif" alt="" /></div>
</div>
</td>
<td align="center" valign="middle">
<div id="shadowdiv" align="center">
<div id="imagediv" style="height: 187px;"><img src="/images/fit2.gif" alt="" /></div>
</div>
</td>
</tr>

<tr>
<td align="center" valign="middle">
<div id="shadowdiv" align="center" >
<div id="imagediv" style="height: 187px;"><img src="/images/3dlogo2.gif" alt="" /></div>
</div>
</td>
<td align="center" valign="middle">
<div id="shadowdiv" align="center">
<div id="imagediv" style="height: 187px;" align="center"><img src="/images/smallgroups2.gif" alt="" /></div>
</div>
</td>
</tr>

<tr>
<td align="center" valign="middle">
<div id="shadowdiv">
<div id="imagediv" style="height: 386px;"><img src="/images/christmasshow2.gif" alt="" /></div>
</div>
</td>
<td align="center" valign="middle">
<div id="shadowdiv">
<div id="imagediv" style="height: 386px;"><img src="/images/servicetimes2.gif" alt="" /></div>
</div>
</td>
</tr>
</table>


Here's the css regarding the two divs:

#shadowdiv {
width: 360px;
padding: 5px;
filter: shadow(color:red, strength:6, direction:135);
vertical-align: middle;
text-align: center;
}

#imagediv {
width: 350px;
text-align: center;
padding: 0px;
background-image: url(/images/marb009.jpg);
border: 1px solid black;
font-size: 12px;
vertical-align: center;
}

As I play with the text-align property it moves the image horizontally, the vertical-align property seems to have no effect on the image placement though. I'm making the page in IE.

I'm thinking if nothing else I could try putting a table in the div, then put the image in the table, and center it that way... but if there's a way to do it with just the divs, that'd be preferable.

[rsteph]

Any thoughts on this?

[Thevercad]

As far as i know, you cannot align elements inside a div, vertically. You can go for the option of padding-top and padding-bottom. But if your images are going to be of different height, even that might be a problem.

Inside the div, if you put a table, and the image inside it, then it could solve your problem. But the question then arises, why use the div at all.

[rsteph]

The Divs were used to create the shadowed effect. A div behind a div kind of thing. Though now they are thinking instead of a shadowed effect, that want a button effect, So I'll probably just go with a table with thicker borders... work with the various border color options to make it appear as a raised button.

As far as i know, you cannot align elements inside a div, vertically. You can go for the option of padding-top and padding-bottom. But if your images are going to be of different height, even that might be a problem.

Inside the div, if you put a table, and the image inside it, then it could solve your problem. But the question then arises, why use the div at all.