CSS：如何垂直對齊「div」中的「標籤」和「輸入」？

考慮following code：CSS：如何垂直對齊「div」中的「標籤」和「輸入」？

HTML：

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

CSS：

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

會是什麼把label和的div（垂直）中間的input最簡單的方法？

來源

2010-12-17 Misha Moroshko

據我所知，底線是「你不能」，最懶惰的方法是使用一個簡單的'

'並將'valign ='middle''應用到它的''s。 – BeemerGuy2010-12-17 00:07:59

回答

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

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

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

來源

2010-12-17 00:14:39

看起來優雅:)有誰知道瀏覽器如何兼容這種方法？ – 2010-12-17 00:25:48

對於IE，我認爲它只適用於IE8或更高版本。對於其他網頁瀏覽器，它很好。 – 2010-12-17 00:34:43

我不知道'display：table-cell'。這是在某些瀏覽器上支持的嗎？ – BeemerGuy 2010-12-17 00:41:24

裹標籤和輸入在具有限定的高度的另一格。在IE中的版本低於8.

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

來源

2010-12-17 00:14:56 Trevor

上的label和input的div（頂部和底部）和vertical-align:middle這可能不起作用使用padding。

例如在http://jsfiddle.net/VLFeV/1/

來源

2010-12-17 00:20:24

這不適用於jsfiddle。我改變了'div'的高度，裏面的內容完全沒有移動。我錯過了什麼嗎？ – BeemerGuy 2010-12-17 00:39:00

在我看來，佈局不應該有固定的像素高度......佈局應該流暢地圍繞內容流動。但是，我從一天一次的時間裏瀏覽器縮放文本大小時放大和縮小。最近的瀏覽器實際上會縮放整個頁面，因此設置像素高度的效果會更好一些。然而，避免設置像素高度的全新理由......例如響應式佈局技術。這就是爲什麼這將是我的首選方法。 – thirdender 2012-06-26 17:55:00

這工作的跨瀏覽器，提供了更多的輔助功能，並配有更少的標記。溝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>

來源

2010-12-17 01:48:56 albert

這顯然不適用於雙線標籤。如果你確定標籤始終是單行的，那麼就有數百萬其他的選擇。 – Lashae 2013-04-18 07:33:51

+11

這個問題是關於單行標籤，我相應地回答。不確定你在這裏的意思或意圖，但如果x很明顯，你應該去做一個例子。至少你可以在我的回答下感到愉快，並感受到你百萬勝利的力量。喝彩。 – albert 2013-04-18 08:23:54

這是單線標籤的最佳答案。該規範說：「如果未指定for屬性，但標籤元素具有可標記的與窗體相關聯的元素後代，則第一個樹形順序的後代是標籤元素的標籤控件。」因此，這是唯一可以省略'for'和'id'屬性的最簡單方法。 – parliament 2016-04-09 01:28:43

我知道這個問題是問兩年多前，但對於任何最近的觀衆，這裏是一個替代的解決方案，其中有超過馬克 - 弗朗索瓦的解決方案的幾個優點：

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

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

唯一的另一個優點是，它只是多了一個CSS規則，而不是兩個:)

乾杯！

來源

2012-12-27 18:32:03 MusikAnimal

但是，如果標籤文本大於一行，則不起作用 – GlennG 2014-06-10 13:31:40

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

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

來源

2015-10-27 09:25:54 abahet

一個更現代的方法是使用CSS彈性盒。

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

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

更復雜的例子...如果你有在柔性流動multible元素，你可以使用對齊自單元素排列不同，以指定的對齊...

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 placholder="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>

來源

2016-10-09 03:36:32

我希望這可以在標籤中包含圖像和文本時生效。我有一個小圖標，後面跟着文字，但是文字沒有改變。 – 2017-03-09 16:20:35

它可以工作，如果標籤和文字是單獨的元素，或者如果你讓你的標籤也是一個flexbox ... – 2017-03-11 16:05:02

這對我有效！好例子呢！ – Tony 2017-12-05 16:44:06

相關問題