Question

This fiddle demonstrates the issue: http://jsfiddle.net/wrYsx/

Related code:

<style>
    #floater {
        background-color: red;
        height: 35px;
        width: 35px;
        float: right;
    }

    table {
        width: 100%;
    }

    table tr td {
        border: 1px solid green;
        vertical-align: middle;
        height: 35px;
    }
</style>
<table>
    <tr>
        <td>
            <div id='floater'></div>
            some text
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            some text
        </td>
    </tr>
</table>

Basically, if I have a td with a given height, I can use vertical-align: middle to center things in the td. However, when there is another element inside the td that is floated (right in my case) then the vertical-align is not respected and the text sits at the top of the td. Any ideas how to style this so you can have a td with vertical-align and floated elements?

Also, I found this post: stackoverflow.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floate however it’s not a solution for me, since I will likely need to have floated elements. I’ve tried using positioning to mimic the same layout but it doesn’t seem I can position a td cell so that I can use position: absolute inside it to position the “floated” element at right: 0.

Answer 1

Try adding an empty element to the td.

<span class="vertical_aligner"></span>

.vertical_aligner {
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}