Vertical-align

Do you know why this isn’t this aligning vertically?

<?php
echo '<div style="float:left;width:60px;height:60px;vertical-align:middle;background-color:blue;">';
echo '<p style="vertical-align:middle;margin:0px;text-align:center;overflow:auto;font-weight:bold;font-size:16px;">Save 6.24</p>';
echo '</div>'; //closes headline div
?>

in-line css for question convenience.

vertical-align: middle only works on inline elements (like images) or when you are using display: table. E.g.

<div style="[COLOR="#FF0000"]display: table;[/COLOR] float:left;width:60px;height:60px;background-color:blue;">
<p style="[COLOR="#FF0000"]display: table-cell[/COLOR];vertical-align:middle;margin:0px;text-align:center;overflow:auto;font-weight:bold;font-size:16px;">Save 6.24</p>
</div>

This won’t work in versions of IE less than 8, but IMO IE7 and lower are dead donkeys now (like the people who still use them).

Thanks ralph.m

Is there a reference for that explains the connection between display and vertical-align?

I’m sure there are good references, and this will be explained in the CSS Specs themselves. See if these two pages help:

http://reference.sitepoint.com/css/display