html - 输入框对齐和对齐上的文本效果

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;
}

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

Answer 2

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

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