CSS 垂直对齐：表格、表单和 div 的基线

Question

我正在尝试构建一个包含输入、文本区域和块元素的表单，每个元素都有一个标签。为了获得灵活的网格，我使用了表格。为了使标签和输入/文本区域匹配垂直对齐，我设置了 vertical-align: benchmark; 这对于输入和文本区域效果很好。但不适用于 div（请参阅此 jsFiddle）。因此，div 的标签在单元格的底部对齐，但我希望它在顶部，即基线应该在顶部。

如何在不更改 div 内容或不必区分输入/文本区域和 div 标签的情况下实现此目的？有什么方法可以强制不可见的基线位于表格单元格的顶部吗？

也许我没有从正确的角度处理这个问题，任何见解都会受到赞赏。

Answer 1

使用下面的代码来解决您的问题：

  td, label, textarea {
            vertical-align: top;
        }

Answer 2

您的 div 必须至少有一个字符（例如  ）。

---

对于文本区域，“垂直对齐：基线；”仅适用于壁虎。

正如 developer.mozilla.org 所说，

HTML 规范没有定义 的基线在哪里。是。</p><br />

我找到了解决方法，但它改变了 HTML。
我将vertical-align: text-top设置为textarea，并且为了修复由border-top和textarea的padding顶部的高度引起的间隙，我将其设置为负margin-top。为了避免文本区域与其上方的所有元素重叠，我在文本区域周围放置了一个 div，并使用 padding-top 来平衡间隙。

HTML：

<div class="textarea-wrapper"><textarea id="b">nice vertical alignment</textarea></div>

CSS：

.textarea-wrapper {
    display: inline-block;
    padding-top: 1px; /* - margin-top of textarea */
}
.textarea-wrapper textarea {
    vertical-align: text-top;
    margin-top: -1px; /* - (border-top-width + padding-top) */
}

我更新了您的 jsFiddle。