Valign to middle not working

[n3wb1e]

I have a cell containing a div tag which itself contains an image. When the page loads, the image loads at the top of the cell and not the middle. Ive specified middle alignment in the cell and also the CSS but it still stubbornly stays at the top.

--------------HTML----------------
<td colspan="2" height="220" valign="middle">
<div class="headerLogoMainPage"><img src="images/HCLogo.gif" width="210" height="116" /></div></td>


-------------CSS---------------------
.headerLogoMainPage{
height: 220px;
float:left;
width: 210px;
background-image:url(../images/GradientBackground.gif);
vertical-align:middle;}

Thanks for any help.

[jscheuer1]

vAlign and vertical-align don't apply to divisions.


.headerLogoMainPage img {
display: block;
margin-top: 52px;
}

should do the trick. 52 is the height of the div (also happens to be the height of the td, which helps make this work) minus the height of the image divided by 2.

Alternatively, if you skipped the division and put the background image as style to the td and plopped the image directly in the td, the td's vAlign would work. It's deprecated though, so instead, set it as vertical-align for the td in the stylesheet:


<td class="headerLogoMainPage" colspan="2">
<img src="images/HCLogo.gif" alt="" /></td>


.headerLogoMainPage {
height: 220px;
text-align: left;
vertical-align: middle;
background-image: url(../images/GradientBackground.gif);
}

.headerLogoMainPage img {
width: 210px;
height: 116px;
}

[n3wb1e]

Thank you very much John, that worked nicely.