CSS:如何在 "label"中垂直对齐 "input"和 "div"？

Question

考虑 following code :

HTML:

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

CSS:

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

将 label 和 input 放在 div 中间(垂直)的最简单方法是什么？

Answer 1

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

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

此方法的优点是您可以更改 div 的高度、更改文本字段的高度和更改字体大小，所有内容都将始终位于中间。

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