Vertical Align???

[lowmarklow]

Hi Guys,

Haven't got a clue why vertical-align:middle; doesn't work at all.

CSS:



div#press_releases_wrapper {clear: both; float: left; margin-bottom: 50px;}

div#press_releases_heading {padding-bottom: 30px;}

div#press_releases_image {float: left; width: 75px; height: 96px; background-image: url('../images/clientarea/icon-press-releases.jpg'); background-repeat: no-repeat; margin-bottom: 15px;}

div#press_releases_righttext {float: left; width: 170px; height: 96px; padding-left: 10px; vertical-align: middle;}

div#press_releases_text {clear: both; border-top: 1px dotted #285995; padding-top: 10px;}

div.press_releases_arrow {background-image: url('../images/services/icon-arrow.gif'); background-repeat: no-repeat; background-position: left; padding-left: 20px;}


and the HTML bit:



<div id="press_releases_wrapper">
<div id="press_releases_heading">
<h1>Press releases</h1>
</div><!--PRESS_RELEASES_HEADING-->
<div id="press_releases_image">
</div><!--PRESS_RELEASES_IMAGE-->
<div id="press_releases_righttext">
<p>Inform people about your ISO status with our press release template.</p>
</div><!--PRESS_RELEASES_RIGHTEXT-->
<div id="press_releases_text">
<div class="manage_details_arrow">
<p><a href="client-area-templates.asp">View Template</a></p>
</div><!--PRESS_RELEASES_ARROW-->
</div><!--PRESS_RELEASES_TEXT-->
</div><!--PRESS_RELEASES_WRAPPER-->


Can anybody help me? Thanks,

Mark

[simcomedia]

This explains how the vertical-align: properties work. Note that it affects the 'element' and not the content.

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

[jscheuer1]

The vertical-align property only applies to table cells (replaces the vAlign attribute) and to inline elements like (in their default display mode) images, spans, and inputs. The meaning is almost entirely different visa vis inline elements as opposed table cells (<td>). Cross browser implementation of vertical-align for inline elements is inconsistent. The division (<div>) is a block element so vertical-align has no meaning for it. You may adjust its top and bottom margins and/or top and bottom padding. There are other ways, those are the most straightforward.