將標簽與輸入垂直對齊

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。