Using vertical-align for images and buttons

I’m working on a basic search form and the visual design requires a graphic button instead of the browser-generated input. I’m using the button tag instead of an input type=”submit”. While putting the page together, I had a nagging issue with the button not aligning with the label and input. I tried various combinations of margins, negative-margins, padding, and even floated the elements. All of these techniques eventually worked, but the were too klunky and I knew there had to be a better way.

I remembered the vertical-align:middle style while working on a footer paragraph that included inline links and RSS buttons. I tried it with the submit button and it also worked perfectly. I’ve tested this in FF 1.5 and IE6. I have not tested it in Safari yet.

Code Examples

CSS:

form#foo button {vertical-align:middle; border:none; padding:0; background:none; cursor:pointer; *cursor:hand; /*alternate cursor for IE*/}

HTML

...

Resources

5 thoughts on “Using vertical-align for images and buttons”

  1. Great solution to a very common problem. Using a button rather than an input i was successful in lining up my custom image based submit button with the input field, but still had some issues with the “label” text. I opted to put everything into an unordered list which i then floated to the left. I then applied the vertical align to everything inside the list and was able to get nice vertical alignment on my small one line form. I did have to nudge the label text a bit for ie6, but other than that it turned out very clean!

  2. Thanks for the tip, I was having this very issue today with the form submit image on my blog. Still a little out of whack on Safari though.

    N

Leave a Reply

Your email address will not be published. Required fields are marked *