Question

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?

Answer 1

this is being added to the input

margin:0 0 12px 0;

just set the bottom margin to 0 or add the 12px margin to the top, its up to you