垂直对齐输入？

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/