had an annoying image alignment issue when was working on form. I wanted to use an image button as submit button instead using a default submit input. The image button didn’t nicely with the label and other input, so I tried this way.

CSS

form#exampleForm button {
padding:0;
border:none;
background:none;
vertical-: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>

Vertical Image Alignment Fix

Source

7 thoughts on “Vertical Alignment for Images and Buttons”


Leave a Reply