Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

它完美地工作但是当标签太长时（如在第二个输入中），输入元素对齐到行的顶部。它看起来有点难看。我希望输入在行的中间对齐。但我无法弄清楚如何实现这一目标。

我尝试使用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;
}

垂直对齐table-cell元素

2 个答案: