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


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




Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Join the Conversation


  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!

Leave a comment

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