垂直对齐表格单元格元素

Question

我正在尝试使用 display: table* CSS 属性设置对齐的 html 表单的样式。现在我正在使用这样的东西：

.form-aligned {
  display: table;
}
.form-aligned label {
  display: table-row;
}
.form-aligned .label {
  width: 100px;
}
.form-aligned .label,
.form-aligned input,
.form-aligned .error {
  display: table-cell;
}

<form class="form-aligned">
  <label>
    <span class="label">Age</span>
    <input/>
    <span class="error">Must be a number between 1 and 199</span>
  </label>
  <label>
    <span class="label">Last or First or Whatever name</span>
    <input/>
    <span class="error">Be serious please</span>
  </label>
</form>

它工作得很好，但是当标签太长时（如在第二个输入中），输入元素与行的顶部对齐。它看起来有点难看。我想要一个输入在行的中间对齐。但我不知道如何实现。

我尝试使用vertical-align: middle，但它似乎不起作用。

如果我将输入包含在容器中，它将起作用。但这是我想避免的额外标记。

这是小提琴：http://jsfiddle.net/oab5hbqo/1/，下面是具有正确 vertical-align 行为的真实表格（我试图通过 CSS 实现）。

Answer 1

input 是 replaced elements，不能（在大多数浏览器上）显示为 table-cell。

事实上，如果它显示为table-cell，它会增长到覆盖所有行的高度。也就是说，表格单元格的高度与表格行的高度相同，因此将表格单元格垂直居中是没有意义的。

所以你必须使用容器，或者考虑非表格的方法。

Answer 2

您可以为此使用display: inline-flex

小提琴：http://jsfiddle.net/oab5hbqo/5/

这是所有的css：

.form-aligned label {
    display: inline-flex;
    vertical-align: middle;
}
.form-aligned .label {
    width: 100px;
    border: 1px solid red;
}
span, input {
    margin: auto;
}