CSS：如何在“div”中垂直對齊“label”和“input”？

Question

請考慮以下代碼 ：

HTML：

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS：

div {
    height: 50px;
    border: 1px solid blue;
}

將label和input放在div中間（垂直）的最簡單方法是什么？

Answer 1

 div { display: table-cell; vertical-align: middle; height: 50px; border: 1px solid red; } 

 <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> 

這種方法的優點是你可以改變div的高度，改變文本字段的高度和改變字體大小，一切都將保持在中間。

http://jsfiddle.net/53ALd/6/

Answer 2

更現代的方法是使用css flex-box。

 div { height: 50px; background: grey; display: flex; align-items: center } 

 <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> 

一個更復雜的例子......如果你在flex流程中有多個元素，你可以使用align-self將不同的單個元素對齊到指定的對齊...

 div { display: flex; align-items: center } * { margin: 10px } label { align-self: flex-start } 

 <div> <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" /> <label>Text</label> <input placeholder="Text" type="text" /> </div> 

它也非常容易水平和垂直居中：

 div { position:absolute; top:0;left:0;right:0;bottom:0; background: grey; display: flex; align-items: center; justify-content:center } 

 <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> 

Answer 3

這適用於跨瀏覽器，提供更多可訪問性並且標記更少。 放棄了div。 包裹標簽

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

Answer 4

我知道這個問題是在兩年前提出來的，但是對於最近的觀眾來說，這里有一個替代解決方案，它比Marc-François的解決方案有一些優勢：

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

這里我們只添加一個等於div高度的line-height 。 現在，您可以將優勢更改div的顯示屬性，例如inline-block ，它的內容將保持垂直居中。 接受的解決方案要求您將div視為表格單元格。 這應該完美，跨瀏覽器。

唯一的另一個好處是它只是一個CSS規則而不是兩個:)

干杯!

Answer 5

在div （ 頂部和底部 ）和vertical-align:middle label和input vertical-align:middle使用padding 。

http://jsfiddle.net/VLFeV/1/上的示例

Answer 6

將標簽包裹並輸入另一個具有指定高度的div。 這可能不適用於低於8的IE版本。

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Answer 7

您可以使用display: table-cell屬性，如下面的代碼所示：

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }