对齐时输入框对齐和文本效果

Question

我有以下小提琴：

http://jsfiddle.net/neGJF/

HTML代码如下：

<div class="loginbarGrad">

<div style="position:relative; float:right; padding: 11px 65px 0 0;">
    <input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email">
    <input type="password" placeholder="PASSWORD" value="PASSWORD" class="singleField" name="kp_password" id="kp_password">
    <a class="signIn">Sign In</a> 
</div>

</div>  

你可以看到小提琴上的CSS。

我正在尝试增加输入的框大小，并尝试增加“登录”的大小。我想知道是否有人可以解释为什么当我增加字体的大小时，它不会在登录栏中垂直居中，而且，为什么它会影响登录/密码框的对齐？我希望能够拥有它，以便盒子和登录不会相互影响。这可能是一个基本的CSS功能，但它让我不知所措，所以我希望有更多经验的人能帮我解释一下。

谢谢！

Answer 1

你为什么不试试：

.loginbarGrad > div > * {
    vertical-align: middle;
}

.loginbarGrad中div内的元素将全部对齐到彼此的中间。

Answer 2

你也可以向左侧移动输入并将它们从侧面留出一点距离 并且你可以自由地增加.signin文本的字体大小，只需确保添加与输入相同高度的行高

.signIn { font-size: 24px; line-height: 18px; }
#kp_password , #kp_email { float:left; margin: 0 5px;}