n00b0101
asked on
Vertical alignment of multiple elements compatible with many browsers?
I have three things I'd like to align vertically, but not using tables. Just using css. Is there a workaround/hack/solution that is compatible with the major browsers (and versions)?
<h1>This is a title</h1>
<input type="text" name="" value="a text box">
<input type="image" src="sample.gif" name="">
The text box is a bit larger than the <h1> element, and the image, is a bit larger than the textbox, thus, the desire to have them all vertically aligned in the middle of a div that has a height of 100px.
Help?
<h1>This is a title</h1>
<input type="text" name="" value="a text box">
<input type="image" src="sample.gif" name="">
The text box is a bit larger than the <h1> element, and the image, is a bit larger than the textbox, thus, the desire to have them all vertically aligned in the middle of a div that has a height of 100px.
Help?
ASKER
doesn't work in ie.... that's okay though. i wound up create 3 separate divs and using float: left for each, but, if there's a better solution, i'm all ears.
are you referring to the title not being in the same line as the text box and image?
I used ie to test and its ok.
I used ie to test and its ok.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
what version of ie? ie7 is okay, but >7, not working for me. :/
ie 6 and ff 2
<div style="height:100px;border
<h1 style="vertical-align: middle;">This is a title</h1>
<input type="text" name="" value="a text box" style="vertical-align: middle;">
<input type="image" src="sample.gif" name="" style="vertical-align: middle;">
</div>