css vertically align text in input elements?

August 9, 2007 11:46 AM

I'm such a horrible n00b. How do I use css to vertically align the text in an input textbox with the label on the corresponding submit button?

I want the word "default" to vertically align with the word "search" in the following code (which it doesn't in firefox, but seems to in ie):

(imagine angly brackets instead of [])

[style]
input.txt {
vertical-align: middle;
color:#888;
height: 19px;
font: 9px verdana;
}
input.btn {
vertical-align: middle;
height: 19px;
font: 9px verdana;
background-color:#f2f2f2;
border:1px solid #aaaaaa;
}
[/style]
[input name="textbox" class="txt" value="default" maxlength="60" size="30" class="form" type="text"]
[input name="submitSearch" class="btn" value="search" type="submit"]

posted by juv3nal to Computers & Internet (10 answers total)

i have been doing css for years, and yet I find the aligning text with buttons issue so annoying that I still end up just making a little table most of the time.

sometimes "line-height" on the text can help though...
posted by drjimmy11 at 12:03 PM on August 9, 2007

Remove the vertical-align from input.txt and set vertical-align: baseline in input.btn
posted by turaho at 12:22 PM on August 9, 2007

Response by poster: Remove the vertical-align from input.txt and set vertical-align: baseline in input.btn


That's not working in firefox for me. What it does is change the position so the boxes don't line up. In doing so, the text gets closer to lining up, but still off by 1 px.

I should maybe have been clearer. I would like the boxes to line up as well as the text.
posted by juv3nal at 12:28 PM on August 9, 2007

Have to say that Doc Jimmy has the least-painful solution that I've seen so far. Vertical alignment in CSS is so touchy that simple applications of it are complex at best.
posted by ASoze at 12:33 PM on August 9, 2007

Response by poster:
Have to say that Doc Jimmy has the least-painful solution that I've seen so far.

I fiddled about with line-height and it didn't seem to do anything.

Color me dense, but although I see how a table can be used to get the boxes lined up, I don't get how it can be used to get the text inside them to line up.
posted by juv3nal at 12:45 PM on August 9, 2007

Best answer: How about a Firefox/IE hack? IE can recognize CSS values in quotes, Firefox can't. So try this:

[style]
input.txt {
color:#888;
height: 20px;
font: 9px verdana;
padding:2px;
}
input.btn {
vertical-align:baseline;
vertical-align:"1px";
height: 19px;
font: 9px verdana;
background-color:#f2f2f2;
border:1px solid #aaaaaa;
}
[/style]
posted by turaho at 12:47 PM on August 9, 2007

Response by poster: That didn't quite do it, but it gave me the spark to fiddle with padding which totally hadn't occurred to me. I think I can sort something out. Thanks all.
posted by juv3nal at 1:12 PM on August 9, 2007

Using mozilla or foxfire? As a general answer for questions like these: 1. go here and install Chris Pederick's web developer toolbar; 2. locate a page that does what you want; 3. in the toolbar, open the css dropdown menu and select "view css."

For learning any kind of coding, there's nothing like looking at the code of programmers or web developers who are better than we are. Then we (to channel Tom Lehrer) stea I MEAN adapt what we see to other purposes. This only ends when we become the very bestest coder in the whole world and there's no one left to stea I MEAN adapt from. (At that point it dawns on us that whatever language it was that we've earned our Shaolin black belt in is now hopelessly out of date and there's a whole new generation of kids out there who are already way ahead of us in the latest big thing.)
posted by jfuller at 2:26 PM on August 9, 2007

Anybody need a device driver written in 6502 assembler? Will work for food.
posted by flabdablet at 7:06 PM on August 9, 2007

For the apple ii by chance? Come hang out on page 0 ram with the rest of us redundant types. Have some mad dog 20/20.
posted by jfuller at 7:45 PM on August 9, 2007