Html 输入框对齐方式和对齐方式上的文字效果

我有以下几把小提琴：

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函数，但我一直在逃避它，所以我希望有比我更有经验的人能够帮助解释它

谢谢大家!

你为什么不试试：

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

---

.loginbarGrad

中div中的元素都将彼此对齐。

您也可以将输入向左浮动，并在两侧留出一点边距 然后，您可以随意增加.sign文本的字体大小，只需确保添加与输入相同高度的行高度即可

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