CODEWITHSUNDEEP
htmlcss
lobstahcrushah
lobstahcrushah

Reputation: 54

Input box alignment and text effects on alignments

I have the following fiddle:

http://jsfiddle.net/neGJF/

The HTML code is as follows:

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

You can see the CSS at the fiddle.

I am trying to increase the box size of the inputs, and also trying to increase the size of the "sign in". I was wondering if someone could explain why when I increase the size of the font, it's not centered vertically within the login bar, and also, why it impacts the alignment of the login/password box? I'd like to be able to have it so that the boxes and sign in are not impacting each other. This may be a basic CSS function but it's eluding me, so I am hoping someone with more experience than I can help explain it.

Thank you!

Upvotes: 0

Views: 122

Answers (2)

Itay Sidis
Itay Sidis

Reputation: 101

you can also float left the inputs and space them out with a bit of margin from the sides and than you're free to increase the font-size of the .signin text just make sure to add line-height with the same height as the inputs

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

Upvotes: 0

Chad
Chad

Reputation: 5408

Why don't you try: 

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

The elements within the div within .loginbarGrad will all align to the middle of each other.

Upvotes: 1

Related Questions