Align label and input inside a table row

Question

I encounter a simple problem at first, but I can not solve. I have a table representing a form with many rows (one in my sample to simplify), having two columns : the first contains a label, the second the input field.

<table>
  <tr>
    <td class="labelcell">
      <div class="label">
        <label>Name</label>
      </div>
    </td>
    <td>
      <div class="control">
        <div class="input">
          <input type="text" value="John" />
        </div>
        <div class="more">+</div>
      </div>
    </td>
  </tr>
</table>

My problem is that the text of the label and the text of the input are not verticaly aligned. Here's a example that reproduce my problem : http://jsfiddle.net/KBz8g/

The label is too low. I don't know how to solve this properly. I do not want to change the first two css rules (reset from meyer and box sizing), although the property vertical-align set to baseline seems suspect.

I'm not any kind of CSS expert. But I note the bottom of the textbox is aligned with the bottom of the text in the label. Could that be a clue? — Ann L., Feb 02 '13 at 23:50
`td { vertical-align: middle; }` [seems to do the trick](http://jsfiddle.net/vHjK5/), or am I missing something? — Jeroen, Feb 02 '13 at 23:50
There are a variety of solutions offered here: http://stackoverflow.com/questions/4466596/css-how-to-align-vertically-a-label-and-input-inside-a-div?rq=1 — Ann L., Feb 02 '13 at 23:53

score 1 · Answer 1 · answered Feb 02 '13 at 23:51

1

Would this fiddle help ? http://jsfiddle.net/HujQN/1/

I just reset padding and margins for the parts.

div {
    margin: 0;
    padding: 0;
}

answered Feb 02 '13 at 23:51

mimipc

1,354
2
14
28

Align label and input inside a table row

1 Answers1