centering an image vertically within a <div>

[MonteChristo]

from what i can tell this is quite a nuisance to achieve. i have a <div class="mainredblock"</div> tag that is 55% high and 100% wide. enclosed in this is another <div> tag that is 'restrictor' that keeps the content maxed at 1000px wide. inside this i want to insert an image that is 420px high, and make it center vertically within the 'container' div and float:right in the redbar so its flush left with the right edge of the 'restrictor' div. Right now the image floats right just fine but sticks to the top of the housing div box and will not get centered vertically. any ideas? thanks!


<div class="mainredblock">
<div class="restrictor">
<div class="homepageimage">
<a href="http://www.abc.com"><img src="globalimages/map.png" alt="" border="0"></a></div>
</div></div>

and the css:


.mainredblock .homepageimage {
float: right;
valign:middle;
}

.restrictor {
width: 1000px;
margin: 0 auto;
min-width: 1000px; width: expression (document.body.clientWidth < 1000? "1000px": "auto");
}

.mainredblock {
font-size: 1.1em;
width: 100%;
height: 55%;
margin: 0 auto;
background-color: #FF0000;
float: left;
min-height: 420px; height: expression (document.body.clientHeight < 420? "420px": "auto");
}

[aravelli]

.mainredblock .homepageimage {
#position: relative;
#top: 50%;
vertical-align: middle;
}

try this

i think this may help you

[rangana]

You could add this code in .mainredblock .hompageimage div


position:relative;
top:75%;


...or you could manipulate the position using margin by adding margin-top:100px;in .mainredblock .hompageimage div.

See if it helps :D