Question

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

我尝试了表格单元格方法，但没有运气：

<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/

垂直对齐输入？

3 个答案: