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!
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!
taylan
November 27th 2007
I have this problem after a few days, thank u..
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.
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.
South Creative
November 27th 2007
I never even thought of using vertical-align on inputs. Thanks!
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.
In Davis
November 27th 2007
The best solutions are the simplest ones. Thanks a bunch.
Ash
March 8th 2009
Thanks a ton !!
Kim Kardashian nude
May 12th 2009
<a >Kim Kardashian nude</a> http://mograph.net/board/index.php?showuser=19959 - Kim Kardashian nude <a >Paris hilton nude</a> http://www.spike.com/blog/paris-hilton-nude/78688 - Paris hilton nude <a >Paris hilton Sex Tape</a> http://www.vivvo.net/forums/member.php?u=8199 - Paris hilton Sex Tape <a >JESSICA SIMPSON NUDE</a> http://isuzuforums.com/forum/member.php?u=6131 - JESSICA SIMPSON NUDE
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.