Using vertical-align for images and buttons
Published 2 years, 8 months ago in Accessibility, CSS, Form, Form Button, W3C and vertical-align Digg ThisI’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
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!
Thanks for solving this for me, it was driving me crazy.
I had forgotten all about the vertical-align in CSS.
Daniel
I tried but the image is still above the text next to it. Do you have an example for this?
Worked great. Thanks!