按钮未与输入对齐（由于输入的填充）

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/

Answer 2

使用：

vertical-align:middle;
margin-top: -5px;

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

Answer 3

在.form课程中，只需将padding-top和padding-bottom值更改为：

.form  {

    padding-right: 4px;
    padding-bottom: 8px;

}