垂直对齐输入？

Question

我需要在其父级中垂直对齐输入及其标签。

我试过 table 单元格方法，但没有成功:

<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

将 .holder 设置为 table 单元格。

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

.input{
    /* remove the styles */
}

Updated Fiddle

Answer 2

在父项上尝试 line-height 属性。将其设置为 400px 将使所有内容垂直对齐。

看这个例子：https://jsfiddle.net/xhg15p5L/

Answer 3

不需要 table 布局，因为容器具有固定高度，请使用 line-height 属性代替 .holder 元素：

line-height:400px;

JSFiddle

垂直对齐输入？

Vertically align an input?

html

css

alignment