垂直對齊輸入？

Question

Fiddle

我需要垂直對齊其父項中的輸入以及它的標籤。

我已經試過了表格單元格的方法，但沒有運氣：

<div class="holder"> 
    <label>Text input: </label> 
    <input type="text" class="input" /> 
</div> 

.holder{ 
    height: 400px; 
    width: 400px; 
    background: tomato; 
    display: table; 
} 

.input{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 1

沒有必要對錶格佈局，因爲容器有固定的高度，使用line-height屬性，而不是你的.holder元素：

line-height:400px; 

JSFiddle

Answer 2

讓.holder表格單元格。

.holder{ 
    height: 400px; 
    width: 400px; 
    background: tomato; 
    display: table-cell; 
    vertical-align: middle; 
} 

.input{ 
    /* remove the styles */ 
} 

Updated Fiddle

Answer 3

嘗試在父line-height財產。將其設置爲400px將使所有內容垂直對齊。

見這個例子：https://jsfiddle.net/xhg15p5L/