How To Perfectly Align Image Button With HTML Input Textbox
By Angsuman Chakraborty, Gaea News NetworkMonday, May 1, 2006
The form element input with type text strangely refuses to align with an adjacent image button (input element of type image). The problem is rather hard to solve as regular methods like using align or margin or padding or even adding whitespace to the image fails. Here is a surprisingly simple solution to this problem. But first lets take a look at the problem.
The input textbox above is misaligned with the image button above as you can see. The code is:
<form>
<input type="text" name="foo" value="bar">
</input><input type="image" src="https://www.utexas.edu/learn/forms/graphics/button.gif" ></input>
</form>
The solution is deceptively simple. Here is the code which works:
<form>
<input type="text" name="foo" value="bar">
</input><input style="position:absolute" type="image" src="https://www.utexas.edu/learn/forms/graphics/button.gif"></input>
</form>
Here is the demo:
|
March 10, 2010: 12:59 am
how to align the button to right, in an button bar, this button bar contains many button bar which are aligned left |
|
January 15, 2010: 10:37 pm
Been fighting for 2 days , finaly you resolved my problem ! Thanks alot hero ! |
|
September 12, 2009: 6:49 pm
I tried all the options, and I ended up going with vertical-align: middle. But, I had to put the image in a separate td. And, it looks great in IE, slightly low in Firefox, and pretty low in Chrome, but better than it used to be before I found this article. Using position: absolute required that I use a margin-left on the next thing to the right to allow space, so that wasn’t good. I still don’t think this is the 100% solution for all browsers, at least the 3 I tested, IE, FF, and Chrome. |
 Jason |
February 13, 2009: 8:13 pm
Using the technique used in this article (style=”position: absolute”) does not work in safari. However, style=”vertical-align: middle” DOES work. So use that instead. |
 NZ |
January 22, 2009: 8:35 pm
Sorry gus, where are the code? |
 Kenny |
November 10, 2008: 10:04 am
Put the imagebutton before the textbox and in the css, set |
|
May 16, 2008: 11:08 pm
This has been a booger… But I did use style=”vertical-align: middle” which worked like a charm. |
 chk |
|
chk |
|
June 28, 2007: 12:43 am
Fantastic - I’ve used this to align PayPal shopping cart buttons so they don’t affect the page layout below them. It’s a problem with PayPal that has been bugging me for ages! Thanks. |
 weeman |
February 1, 2007: 9:25 am
Bonjour, |
 Nick |
January 5, 2007: 9:38 pm
using vertical-align: text-bottom is the best way to achieve the desired effect |
 Jovi |
November 21, 2006: 4:20 pm
Ive been trying this and ive figured out that puting ur elements in a table, each in a différent cell is doing the alignment very well. ( normal textbox is setting height and text size from my CSS style sheet ) |
|
August 8, 2006: 12:07 pm
Kat: This is probably due to the “image baseline” issue, where there is whitespace at the bottom of an image. Since images are inline objects, they sit on the baseline and not at the bottom of the containing block. Changing the style to “display: block;” would also work in an example like this. |
 Kat |
July 27, 2006: 11:44 pm
align=absmiddle is deprecated. Can anyone explain why this behaviour happens, and why position: absolute solves it? I’m constantly coming across CSS problems but the solutions don’t leave me any the wiser |
 bemular |
gopall