将标签与输入垂直对齐

Question

我目前正在将旧的 HTML 表单转换为不使用表格。标签需要固定宽度，这是我使用此站点的答案实现的。当前代码如下：

HTML

<div id="form">
    <label for="field1">Name&nbsp;</label>
    <input type="text" id="field1" value="default name" />
</div>

CSS

label {
    float: left;
    width: 50px;
    white-space: nowrap;
}
input {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;
}

目前，标签在顶部垂直对齐。如何将标签和字段垂直对齐到中心？

编辑：我得到了很多答案，基本上通过指定数量的像素将我的标签填充到正确的位置。我不想这样做，因为它基本上是硬编码，而不是真正的垂直对齐到中间。

根据我在这里收到的一些建议，我已经清理了一些代码。请参阅上面的编辑代码。

我在label 中尝试过vertical-align: middle;，但它不起作用。请注意，用户的平台将是 IE。

Answer 1

如果我做对了，您希望 label 和 input 垂直居中对齐 W.R.T 彼此而不是页面。为此，有几种方法。

Flexbox 方式

如果您想使用 CSS 世界中的新东西并为未来做好准备，请使用 flexbox。示例 -

.fieldHeading {
  width: 50px;
}
.fieldSpan {
  overflow: hidden;
}
#field1 {
  width: 150px;
}
/*flexbox approach.
* height and background added for clarity.
*/

#form {
  height: 100px;
  background: #bada55;
  display: flex;
  align-items: center;
}

<div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

vertical-align 方式

当您将label 和input 放在一行上作为inline-block 元素时，这很有效。示例 -

.fieldHeading {
  width: 50px;
  vertical-align:middle;
}
.fieldSpan {
  overflow: hidden;
  vertical-align:middle;
}
#field1 {
  width: 150px;
}

<div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

height & line-height 二人组

这也很有效，但如果你的标签很大并且有可能换成多行，它会看起来很糟糕。示例 -

.fieldHeading {
  width: 50px;
}
.fieldSpan {
  overflow: hidden;
}
#field1 {
  width: 150px;
}

/*line-height and height be same for parent
* background added for clarity.
*/
#form {
  line-height: 40px;
  height: 40px;
  background: #bada55;
}

<div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

我希望这些不仅可以帮助您解决这个问题，还可以帮助您解决所有其他垂直对齐问题。

Answer 2

您可以使用line-height 或margin-bottom，直到获得满意的结果。

示例

#form label {
    line-height:1.4;
    margin-bottom:2px;
}

这会将选择器应用于表单下的所有标签。如果你想具体一点，可以使用 .fieldHeading 这样的特定 css 类来代替 #form label。

Answer 3

你需要这样吗？

<div id="form">
    <div class="valign">
        <label for="field1" class="fieldHeading">Name&nbsp;</label>
        <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
    </div>
</div>

<style>
.fieldHeading {
    float: left;
    width: 50px;
}
.fieldSpan {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;   
}

#form {display: table;height:100%;}

.valign {
    display: table-cell;
    vertical-align: middle; 
}

</style>

Answer 4

我认为，解决方案 margin-bottom，使用任何你想要的 px

.fieldHeading {
    float: left;
    width: 50px;
    margin-bottom: 3px;
}

Answer 5

用途：

.fieldHeading {
  display: inline-block;
  width: 50px;
  vertical-align: middle;
}
#field1 { width: 150px; }

设 span 为内联类型。

你并不真的需要跨度来包围你的输入元素。