CSS - vertical align text where text can be multiple lines
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 t开发者_高级运维here 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
SYou mean... graceful degradation? :P
Set the white-space CSS property of the labels to "nowrap".
精彩评论