vertical-align in table cells not working when there is a floated element inside the <td>

css, html, vertical-alignment

Solution

Try adding an empty element to the td.

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

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

Problem

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.

Original source