Zurb Foundation 3：将表单元素垂直对齐到行中答案

【问题标题】：Zurb Foundation 3: vertical align form elements to middle in rowZurb Foundation 3：将表单元素垂直对齐到行中
【发布时间】：2012-09-03 01:12:10
【问题描述】：

编辑：我使用的是 Zurb Foundation 3，所以文本输入可能很特殊

我有一个表单，其中包含几行具有相同字段的表单。在每一行中都有不同类型的元素，一些文本输入，一些按钮，一个复选框......

所有这些元素都有不同的高度，我希望它们彼此垂直居中。到目前为止，这是我的代码：

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

在我指定的 CSS 中：

.middle { vertical-align: middle !important; }

这确实使复选框和按钮居中，但不是文本输入，它们似乎保持顶部对齐。我也尝试了一些使用 div 而不是表格的变体，但没有运气。我错过了什么？

【问题讨论】：

css 和 html 代码是正确的，我在 FF 上测试了它们并且所有输入都正确居中。例如，使用 firebug 检查样式是否正确应用
您使用的是 Zurb Foundation 3 吗？我忘了在正文中提到它，只在我的问题标题中提到它......
不，确实我只是在您的问题正文中尝试了 css 和 html。对不起
您可能需要检查应用于 TD 和 INPUT 元素的 CSS 属性 line-height。我还没有发现vertical-align 在所有情况下都能像您期望的那样执行。不确定是我（可能）还是浏览器实现。

标签： html css vertical-alignment zurb-foundation

【解决方案1】：

正在添加到输入中

margin:0 0 12px 0;

只需将底部边距设置为 0 或将 12px 边距添加到顶部，由您决定

【讨论】：