對齊表格行內的標籤和輸入

Question

我最初遇到一個簡單的問題，但我解決不了。我有一個表格，表格中有很多行（我的示例中有一個表格用於簡化），它有兩列：第一列包含一個標籤，第二列包含輸入字段。

<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> 

我的問題是標籤的文本和輸入的文本不垂直對齊。 下面是一個重現我的問題的示例： http://jsfiddle.net/KBz8g/

該標籤太低。我不知道如何正確解決這個問題。我不想更改前兩個css規則（從meyer和box大小重置），雖然垂直對齊設置爲基線的屬性似乎是可疑的。

Answer 1

這個小提琴會幫忙嗎？ http://jsfiddle.net/HujQN/1/

我只是重置部件的填充和邊距。

div { 
    margin: 0; 
    padding: 0; 
}