1

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?

Se Norm
  • 1,515
  • 4
  • 23
  • 37
  • the css and html code are correct, i tested them on FF and all the inputs are correctly centered. check if the style is correctly applied using firebug for example – Majid Laissi Aug 22 '12 at 10:30
  • Are you using Zurb Foundation 3? I forgot to mention that in the text and only mentioned it in the title of my question... – Se Norm Aug 22 '12 at 10:34
  • nope, indeed i just triyed with the css and html in your question body. Sorry – Majid Laissi Aug 22 '12 at 11:02
  • You may need to inspect the CSS property line-height being applied to the TDs and the INPUT elements. I have not found vertical-align to perform as you might expect in all cases. Not sure if it is me (probably) or the browser implementations. – CSSian Aug 24 '12 at 21:20

1 Answers1

3

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

JCS
  • 46
  • 1