Recently I ran into an issue where I was altering the default search form to use an image_button (see image_button). A call to hook_form_FORM_ID_alter(&$form, $form_state) is what I used to replace the default submit button with an image button.
Once I got the image to show up I realized that the darn thing was way out of alignment. The submit image was at least 7px above the input field. My first thought was I was going to have to do some relative positioning. Thankfully I did a search and I found a forum post here that identified a better way to do it.
In my css is set the following: #search-theme-form input { vertical-align: middle; }
I was rather skeptical that this would work since I had read somewhere that vertical-align only applies to table data <td> objects. I am glad that I found this. Thanks SoulScratch!
I have found this technique to be quite useful on forms in general. This technique seems to be applicable to check boxes, text fields, labels, image buttons, etc.
Observe the following forms:
With vertical-align set to middle
No vertical alignment
As you can see, the simple addition of text-align: middle; to your inputs and labels can make them behave nicely! Note that all inputs, save for the image button are being aligned to the bottom of the form if vertical-align is not set to middle. Not sure on why that is but it seems to be it's default behavior.
Vertical alignment to the top
All of these forms have the same html and css (save for the vertical-align propoerty):
<style type='text/css'>
.test-form-N input, .test-form-N label {
margin: 10px 3px;
line-height: 1.5em;
border: 1px solid #c0c0c0;
/* vertical-align: middle; */
}
</style>
<form class='test-form-N'>
<input type='checkbox'><label>Check box</label></input>
<input type='text'><label>Text field</label></input>
<input type="image" src="/image/btn.png" alt="Submit">
</form>
