在表格行内对齐标签和输入答案

【问题标题】：Align label and input inside a table row在表格行内对齐标签和输入
【发布时间】：2013-01-18 00:46:34
【问题描述】：

我一开始遇到一个简单的问题，但我无法解决。我有一个表格，代表一个包含许多行的表格（在我的示例中为简化），有两列：第一列包含标签，第二列包含输入字段。

<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 和框大小重置），尽管设置为基线的属性 vertical-align 似乎值得怀疑。

【问题讨论】：

我不是任何类型的 CSS 专家。但我注意到文本框的底部与标签中文本的底部对齐。这可能是一个线索吗？
td { vertical-align: middle; } seems to do the trick，还是我错过了什么？
这里提供了多种解决方案：stackoverflow.com/questions/4466596/…
我终于在 td 中使用了垂直对齐样式。那行得通。

标签： html css html-table vertical-alignment

【解决方案1】：

这个小提琴有帮助吗？ http://jsfiddle.net/HujQN/1/

我只是重置了部分的填充和边距。

div {
    margin: 0;
    padding: 0;
}

【讨论】：