将标签与输入垂直对齐

伟大的杰迪

我目前正在将旧的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。

普拉文·普利亚

如果我做对了，您希望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>

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。