How To Perfectly Align Image Button With HTML Input Textbox

By Angsuman Chakraborty, Gaea News Network
Monday, 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="http://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="http://www.utexas.edu/learn/forms/graphics/button.gif"></input>
</form>

Here is the demo:

Filed under: Headline News, How To, Tech Note, Web
Discussion
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 !
mody

January 8, 2010: 8:37 am

Thanks….so simple!

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?
I have a text and a button adjacent to each other, the IE and Firefox refuses to work on one set of code.


Kenny
November 10, 2008: 10:04 am

Put the imagebutton before the textbox and in the css, set display:block and float:right

May 16, 2008: 11:08 pm

This has been a booger…
Didn’t work for me.

But I did use style=”vertical-align: middle” which worked like a charm. ;-)

May 7, 2008: 6:55 am


Works a charm!


chk
November 19, 2007: 2:10 am

asp:ImageButton ID=\


chk
November 19, 2007: 2:05 am

Bonjour, you can solve the 1 pixel problem easily.

Complete Code:

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,
Sous IE6, le bouton Go est 1 pixel au-dessus du input
Tout le monde le voit :o


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.
Cause playing wit absolute positioning in a table can end up really messy.

( 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
July 19, 2006: 10:02 pm

what about aligning them both at the middle vertically?

YOUR VIEW POINT
NAME : (REQUIRED)
MAIL : (REQUIRED)
will not be displayed
WEBSITE : (OPTIONAL)
YOUR
COMMENT :