So, you know how to use a graphic for your <input> submit button, right? Well, have you ever had trouble getting that graphical submit button to line-up with your <input> text field when both are side-by-side on the same horizontal line?
It can be a frustrating issue for any web standards advocate trying to bring a designers design to life … it should work, but why won’t it!? Playing with the margins and paddings don’t help and using absolute positioning just seems unnecessary. Well, thankfully the fix is easy and quick! Just give it a little class.
.submit { vertical-align: middle; *vertical-align: text-bottom; }
Simply give your <input> tag a class and within your CSS, assign that class’s “vertical-align” property. And like magic, all is right in the world.
This may be old news for many of the hard-core CSS nerds in the house — but I know this is an issue that plagues many front-end developers still. I was actually using the absolute position method up until a few months ago when Alex slapped this fix on me — who would have thought “vertical-align”!
A dude...
November 27th 2007
I had this very problem and i was googling for an answer! now here it is!
In Davis
November 27th 2007
The best solutions are the simplest ones. Thanks a bunch.
Martin Ringlein
November 27th 2007
Nik and South Creative, very welcome.
Again, we don’t pretend to know everything about CSS (even though it feels like Alex and John do know it all at times). But, we saw something displaying wrong at default that didn’t make sense and we knew doing some trick hackery (like absolutely positioning the element relative to the form) was wrong, even if it worked and was quick.
Alex figured this one out a long time ago, but the issue plagues so many people still.
South Creative
November 27th 2007
I never even thought of using vertical-align on inputs. Thanks!
Nik
November 27th 2007
Thank you thank you Thank you Thank you. You have no Idea how much annoyance this bug has caused me in the past.
Martin Ringlein
November 27th 2007
Glad this little post is helping … vertical-align is such an odd solution; not intuitive at all that it would be the fix.
taylan
November 27th 2007
I have this problem after a few days, thank u..
Martin Ringlein
November 27th 2007
Oh the power of Google! Glad it could help. I noticed a front-end developer struggling with it back at DC Start-up Weekend and thought the world needed to know!
Ash
March 8th 2009
Thanks a ton !!
kivig
July 9th 2009
Solved this a few times but couldn’t remember how. Thanks :)
Jason
August 12th 2009
Excellent, works a treat.
SEO China
September 24th 2009
I tried the vertical align and it also did not work, is a button inside a table cell (i know, dont use them!) but it is impossible to center!!
gordie
October 12th 2009
if your neighboring field has a border around it, add:
padding-bottom: 1px;
as well to the .submit css entry.
Bluelambda
January 3rd 2010
Thanks for this!! I struggled with about an hour over this before I found the solution in the post above.
Down comforter
January 14th 2010
Great solution folks, thanks a lot.
byGui
March 25th 2010
It works!! Nice tip. Thank you
lee
April 16th 2010
Thank you so much! Now this really works! Have been beating my computer for hours to try and fix this. I could kiss you!
Nina
May 11th 2010
These little things can always drive me crazy.
Thanks!
Ben
May 19th 2010
Thanks I’ve been looking for this!
T
May 19th 2010
<MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE>Thank you!</MARQUEE>
Mark
July 15th 2010
Is there a cross-browser solution? it seems that FireFox and IE interpret this differently. FireFox looks correct when I use “vertical-align:0” (or leave it out) and IE8 likes “vertical-align:-1” or “vertical-align:text-bottom”.
Mack Altman III
August 21st 2010
Thanks you so much for helping me with this. You are the top search result for this issue. Haha.
Down Comforter Sets
August 23rd 2010
Yes very frustrating to say the least. I found your blog through a search and appreciate the help. Exactly what I needed!
SEO Beijing
August 31st 2010
Good trick. Now, let’s find a solution to style input file browse button and make it compatible with any browser :)