Table cell vertical alignment issue

Question

I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:

With float: left

Without float: left

How can I align vertically cell's contents with float? And markup looks like that

<td id="top_logo">
    <a href="index.php">
        <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
    </a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

Answer 1

I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.

<div id="tableRow">
    <div id="leftCell"><img src="mylogo" /></div>
    <div id="middleCell">&nbsp;</div>
    <div id="rightCell">User Name Here</div>
</div>

Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:

#rightCell
{
    height: 30px;
    line-height: 30px;
}

What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.

Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:

display: block;

Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.

Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.