CSS - vertical align text where text can be multiple lines
- by Sniffer
Hi all
I've been given a design by a graphic designer, which I'm trying to put into HTML and CSS.
One of the issues I'm facing is on a user input form. In the design the labels for each input are a fixed width - say 100px. The container for each label/input pair is fixed at 2em. The design I've been given has asked that the text for each label is vertically aligned. So the structure is like this:
<containerTag>
<label />
<input />
</containerTag>
No problems as long as the text is on one line (I would have just used line-height of 2em to match the container), but some of the text in the labels are wrapping to two or even lines.
Is there a semantic and nice way to get around this problem?
I need something that will work in IE6-9, Firefox 3.5+, Chrome and Safari. Although I am using progressive enhancement, so if there is a solution that will only work on the later browsers, but won't break the older ones, then this would be acceptable.
Any help gratefully received!
Thanks for your time
S
