Posts tagged: CSS Tips

Vertical Alignment for Images and Buttons

I had an annoying image alignment issue when I was working on a form. I wanted to use an image button as a submit button instead using a default submit input. The image button didn't align nicely with the label and other input, so I tried this way. CSS form#exampleForm button { padding:0; border:none; background:none; vertical-align:middle; } The key point of this method is using vertical-align:middle in CSS and using the button tag in HTML. HTML <form id='exampleForm' name='exampleForm'> <button name='submit' type='submit'> <img src='/images/button-submit.gif' alt='Submit form' /> </button>