Advanced CSS Design Resources - last-child.com » vertical-align http://www.last-child.com CSS Toys for Professional Web Developers Mon, 19 Dec 2011 18:30:15 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Using vertical-align for images and buttons http://www.last-child.com/using-vertical-align-for-images-and-buttons/ http://www.last-child.com/using-vertical-align-for-images-and-buttons/#comments Tue, 28 Feb 2006 04:32:15 +0000 Ted http://www.last-child.com/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

]]> http://www.last-child.com/using-vertical-align-for-images-and-buttons/feed/ 5