按钮未与输入对齐(由于输入的填充)

Question

下面的按钮未与输入对齐.输入必须与按钮处于相同的高度,尽管输入的填充似乎对对齐有影响!填充顶部和填充底部之间的区别创建了按钮的这种移动.

我做了一个小提琴:http://jsfiddle.net/3RMhm/10/来表明我的意思.

CSS:

.button {
    font-size: 15px;
    padding: 9px 23px;
    border:0;
}
.form  {
    width: 290px;
    background-color: #F9F9F9;
    font-size: 18px;
    color: #333;
    height: 25px;
    border:1px solid darkgray;
    padding-top: 15px;         <--- This padding
    padding-bottom: 0px;       <--- And this padding
}

HTML:

<input name="name" class="form" /> 
    <input class="button" type="submit">

Answer 1

只需添加vertical-align: middle两个元素(按钮和输入).

http://jsfiddle.net/3RMhm/3/