Question

I have form elements that are declared inside a table, who are inherently vertically centered to their table cells.

I have a table cell that has a unordered list and a select box floating left in order to inline them with themselves. It seems that having two of these elements in the same cell will break the vertical centering of my second element (the select box) and force to a the top of the cell (still inline with the unordered list, just no longer vertically centered).

I cannot figure out why this is happening and how to fix the problem. Any ideas?

Here’s the code: http://jsfiddle.net/pVpnd/1/.

If you hide the unordered list, the select box will center itself within the table cell as it should, but only when it’s the lone element within the cell.

Answer 1

Try the following CSS instead of float:

select,ul{
    display:inline-block;
    vertical-align:middle;
}​

jsFiddle example