Align text with input field

[tecno40]

Problem located at: http://myarcade.me/

 

So in the top right hand corner of my page I have a login form. On this form I want everything to be aligned on the same imaginary line, but currently the text is above the text fields. I've tried many different methods to try to move the text down, including putting the text and text fields in inline divs, and adding padding to the top of the text divs, but nothing seems to work.

[JasonLewis]

When you say "above" do you mean it is literally above or there is a slight offset? I'm seeing a slight offset.

You might like to try the vertical-align property, setting it to middle might do the trick for you.

 

<input type="text" name="input" style="vertical-align: middle" />

 

Or use an external stylesheet and give the inputs a class name.

[tecno40]

A slight offset, also I tried vertical align here: http://www5.myarcade.me/ and it looks the same as the original.

[cssfreakie]

this last link doesn't work. As far as your first link and code a few notes:

 

I would use an unordered list instead of a paragaph for your form values.

Besides that i would not use <strong> but <label>

further more i would add vertical-align:bottom; to the image.

Also a good trick to vertical align sigle line elements is to set the line-height to the same amount as the element containing them. So i would suggest for instance to use a <li> with a height of 20px and than set the line-height also to 20px. that way you get perfectly vertical aligned text inside it.

 

so for example:

<style type="text/css">
    #formwrapper{list-style: none;}
    #formwrapper li{margin:10px 0; height:20px; line-height: 20px;}
    #formwrapper li label{width: 80px;display:block;float:left;text-align: right;}
    #formwrapper li img{vertical-align: bottom;}
</style>


<form action="" method="post">
    <ul id="formwrapper">
        <li>
            <label for="name">Name:</label>
            <input id="name" type="text" name="name"/>
            <img src="" alt="" width="" height="" />
        </li>
        <li>
            <label for="password">password:</label>
            <input id="password" type="password" name="password"/>
            <img src="" alt="" width="" height="" />
        </li>
    </ul>
</form>

[cssfreakie]

Edit: in the above setting it should be vertical-align:top for the image.