EDIT: I am using Zurb Foundation 3, so the text-inputs might be special
I have a form which consists of a few rows with identical fields. In each row there are different types of elements, some text inputs, some buttons, a checkbox...
All those elements have different heights and I want them to be vertically centered in respect to each other. This is my code so far:
<tr>
<td class="four middle"><input type="text".../></td>
<td class="two middle"><input type="checkbox".../></td>
<td class="two middle"><input.../></td>
<td class="four middle"><a href="#" class="button small">Button</a></td>
</tr>
In my CSS I specified:
.middle { vertical-align: middle !important; }
This does indeed center the checkbox and the button, but not the text inputs, which seem to remain top-aligned. I have also tried some variations with divs instead of a table, but without luck. What am I missing?