垂直对齐表格单元格元素

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是替换的元素 ，这些元素无法（在大多数浏览器中）显示为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;
}