Html 对齐输入字段上的跨距图标块

我正在尝试在输入字段之前创建一个带有块图标的登录表单

@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

#login {
    margin: 50px auto;
    width: 300px;
    background: #999;
    padding: 50px;
}

#login p {
    line-height: 50px;
}

#login p span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 3px;
    text-align: center;
    border: 1px solid #ccc;
    background: #ccc;
    color: #fff;
} 

#login p input { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    padding: 3px; 
    width: 200px; 
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc; 
    background: #fdfdfd;
}

html

不幸的是，我无法将块（span）图标与输入字段精确对齐。我怎么能这样做？谢谢

---

您需要垂直对齐内联块元素，例如：

#login p > * {
    vertical-align:middle;
}

#login p > * {
    vertical-align:middle;
}