将标签与输入垂直对齐

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垂直居中对齐WRT而不是页面。 为此，有几种方法。

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 Duo

这也很有效，但如果你的标签很大并且有可能包裹成多行，那就太可怕了。 示例 -

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

这会将选择器应用于表单下的所有标签。 如果您想要具体，可以使用特定的css类，如.fieldHeading而不是#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为内联类型。

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