将标签与输入垂直对齐

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

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

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

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

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

Answer 1

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

Flexbox Way

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

vertical-align Way

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

height＆amp; line-height Duo

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

我认为，解决方案边缘底部，使用你想要的任何px

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

Answer 5

使用：

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

让span为内联类型。

你真的不需要用于封闭输入元素的范围。